[JavaScript]
指定の行に指定の HTML を挿入し、指定の行を削除するスクリプトを探しています。
最終行に挿入し、最終行を削除するスクリプトはあるのですが、、、。
cloneNode,insertRow,deleteRow を使用して、指定の行を操作するスクリプトが希望です。
↑じゃなくてもいいです。よろしくお願い致します。
No.1
203
20
800pt
サンプルです。
http://c-man.s21.xrea.com/mars/q1206637704.html
・ヘッダ行に「+」ボタンがないと1行目の前に追加できないので
ヘッダ行もボタンになっています。
(ヘッダ行の「-」ボタンは無視)
・プログラムの都合上、一行は常に存在する仕様です。
（最後の1行を削除しようとすると内容(input)のクリアだけ行われる）
31
31
<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>
1
1
1
ありがとうございます！！！！！
カンペキです！！
"-"をクリックした時の引数にエレメントの ID を与え、、とかやっていて収拾がつかない状態でした。
大変勉強になりました。
ありがとうございました！m(__)mm(__)mm(__)m