私はそれほどナンセンスではありません、私は次のことを直接投稿します。
<html> <head> <title>表</title> </head> <body> <table border = 1> <thead> <td>名</td>姓</td> <td> </ td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> 3 </td> <td> <入力タイプ=ボタン値= add onclick = add()>> <入力型=ボタン値= del onclick = del(this)> </td> </tbody> </body> </html> </html> </html> script> function add(){var trobj = document .CreateElement(TR); > </td> <td> <入力タイプ= 'ボタン'値 '値' add 'onclick =' add() '> <入力タイプ='ボタン 'value =' del 'onclick =' del(this) '> < /td>; getelementbyid(tb)。 . Removechild (trObj);} </script>
上記のコードでは、テーブルがフォローアップ操作を容易にするために、テーブルとTbodyラベルをマークします。
例には、名の最初の列、2番目の列の姓、3番目の列が操作列として3つの列があります。
操作列には2つの操作が含まれています。1つはフォームに行を追加すること、もう1つは現在の行を削除することです。追加ラインと削除ラインの操作は2つのボタンに結び付けられており、ボタンをクリックすると、対応する追加/削除行操作がトリガーされます。
追加の方法function add {var trobj = createelement(tr); <入力名= 'lastName'/> </td> <td> <入力タイプ= 'ボタン' value = 'add' onclick = 'add()'> <input type = 'value =' del 'onclick =' del (this) '> </td>;
最初の行は、TR要素、つまりテーブルラインを作成することです。
2行目、 trObj.id = new Date().getTime();
3行目、 trObj.innerHTML = <td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>
<input type='button' value='Del' onclick='del(this)'></td>
; innerhtmml属性を介して。
4行目、 document.getElementById(tb).appendChild(trObj);
function del(obj){var trum = obj.parentnode.parentnode.id;
パラメーターは、削除方法で伝えられます。このパラメーターは、削除メソッドDelに渡されます。これがある場所。
最初の行では、 var trId = obj.parentNode.parentNode.id
;
2行目では、 var trObj = document.getElementById(trId);
を取得します。
3行目では、 document.getElementById(tb).removeChild(trObj);
上記のコードは基本的に、動的なメーターの増加と削除線の機能を実現しますが、コードには2つの主要なポイントがあります。
1表1増加の前後に、テーブルの幅が変わります
増加
増加
増加した後、フォームの形式がより広くなります
2中国語のブラウザのデフォルトページが中国語で文字化けされている
ページを正常に表示する前に、ページエンコード形式を変更するために文字エンコードを設定する必要があります