テーブル行JS実装コードを動的に追加および削除します

著者：Eve Cole 更新時間：2025-03-10 10:16:01

コードコピーは次のとおりです。

<html>

<head>

<スクリプト言語= "javascript">

//ウィンドウテーブルに行を追加します

関数addNewRow（）{

var tabobj = document.getElementById（ "mytab"）; //テーブルを取得してデータを追加します

var rowsnum = tabobj.rows.length; //現在の行数を取得します

var colsnum = tabobj.rows [rowsnum-1] .cells.length; //行の列の数を取得します

var mynewrow = tabobj.insertrow（rowsnum）; //新しい行を挿入します

var newtdobj1 = mynewrow.insertcell（0）;

newtdobj1.innerhtml = "<input type = 'checkbox' name = 'chkarr' = 'chkarr'"+rowsnum+"style = 'width：20px' />";

var newtdobj2 = mynewrow.insertcell（1）;

newtdobj2.innerhtml = "<input type = 'text' name = 'nodecode' id = 'nodecode'"+rowsnum+"style = 'width：40px' value = '"+rowsn um+"'/>";

var newtdobj3 = mynewrow.insertcell（2）;

newtdobj3.innerhtml = "<input type = 'text' name = 'nodename' id = 'nodename'"+rowsnum+"style = 'width：120px' />";

var newtdobj4 = mynewrow.insertcell（3）;

newtdobj4.innerhtml = "<input type = 'text' name = 'nodeper' id = 'nodeper'"+rowsnum+"style = 'width：60px' />";

}

//ウィンドウテーブルの行を削除します

function removerow（）{

var chkobj = document.getElementsbyname（ "chkarr"）;

var tabobj = document.getElementById（ "mytab"）;

for（var k = 0; k <chkobj.length; k ++）{

if（chkobj [k] .Checked）{

tabobj.deleterow（k+1）;

k = -1;

}

</script>

</head>

<body>

<入力型= "button" name = "xx" onclick = "addnewrow（）;"

<入力型= "button" name = "yy" onclick = "removerow（）;"

<tr>

<td align = "center">シリアル番号</td>

</tr>

</table>

</body>

</html>