人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

[JavaScript]
指定の行に指定の HTML を挿入し、指定の行を削除するスクリプトを探しています。
最終行に挿入し、最終行を削除するスクリプトはあるのですが、、、。

cloneNode,insertRow,deleteRow を使用して、指定の行を操作するスクリプトが希望です。
↑じゃなくてもいいです。よろしくお願い致します。

1206637704
●拡大する

●質問者: akame23
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript スクリプト 希望 操作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Mars
●800ポイント ベストアンサー

サンプルです。

http://c-man.s21.xrea.com/mars/q1206637704.html

・ヘッダ行に「+」ボタンがないと1行目の前に追加できないので

ヘッダ行もボタンになっています。

(ヘッダ行の「-」ボタンは無視)

・プログラムの都合上、一行は常に存在する仕様です。

(最後の1行を削除しようとすると内容(input)のクリアだけ行われる)


<html>
<head>
<title></title>
<script type="text/javascript">
if(window.addEventListener) {
window.addEventListener('click',function(e){
window.event = e;
window.event.srcElement = e.target;
},true);
}

function sample(){
var bt = window.event.srcElement;
if(bt.nodeName != 'INPUT') return;
if(bt.parentNode.cellIndex>1) return;
var tr = bt.parentNode.parentNode;
var thF = (tr.parentNode.nodeName == 'THEAD');
var tbod = (thF)?tr.parentNode.parentNode.tBodies[0]:tr.parentNode;
if(bt.value == '-'){
if(thF)return;
if(tbod.rows.length<2){
clrow(tbod.rows[0]);
return;
}
tbod.deleteRow(tr.sectionRowIndex);
} else {
var rcopy = tbod.rows[0].cloneNode(true);
clrow(rcopy);
if(!thF && tr.sectionRowIndex+1==tbod.rows.length) {
tbod.appendChild(rcopy);
} else {
tbod.insertBefore(rcopy,(thF)?tbod.rows[0]:tr.nextSibling);
}
}
}
// 行内の入力フィールドの初期化(現状 type="text"だけ)
function clrow(o){
var inp = o.getElementsByTagName('input');
for(var i=0;inp[i];i++){
if(inp[i].type == 'text') {
inp[i].value = inp[i].defaultValue;
}
}
}
</script>
</head>
<body>
<table onclick="sample()" border="1">
<thead>
<tr>
<th><input type="button" value="+"></th>
<th><input type="button" value="-"></th>
<th>値</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" value="+"></td>
<td><input type="button" value="-"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
</body>
</html>
◎質問者からの返答

ありがとうございます!!!!!

カンペキです!!

"-"をクリックした時の引数にエレメントの ID を与え、、とかやっていて収拾がつかない状態でした。

大変勉強になりました。

ありがとうございました!m(__)mm(__)mm(__)m

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ