指定の行に指定の HTML を挿入し、指定の行を削除するスクリプトを探しています。
最終行に挿入し、最終行を削除するスクリプトはあるのですが、、、。
cloneNode,insertRow,deleteRow を使用して、指定の行を操作するスクリプトが希望です。
↑じゃなくてもいいです。よろしくお願い致します。
サンプルです。
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