この記事では、JSがテーブルの動的な追加、削除、更新をどのように実装するかについて説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>テーブル操作</title>
<style type = "text/css">
体 {
フォントサイズ：13px;
ラインハイト：25px;
}
テーブル {
ボーダートップ：1pxソリッド＃333;
国境圏：1pxソリッド＃333;
幅：300px;
}
TD {
国境右：1pxソリッド＃333;
国境圏：1pxソリッド＃333;
}
。タイトル {
テキストアライグ：センター;
font-weight：bold;
背景：#ccc;
}
。中心 {
テキストアライグ：センター;
}
#displayinfo {
色：赤;
}
</style>
<script type = "text/javascript">
関数addrow（）{// 1つの行を追加します
var tableobj = document.getElementById（ 'myTable'）;
var rownums = tableobj.rows.length;
var newrow = tableobj.insertrow（rownums）;
var col1 = newrow.insertcell（0）;
col1.innerhtml = "幸福は空から落ちる";
var col2 = newrow.insertcell（1）;
col2.innerhtml = "$ 18.5";
col2.align = "center";
var divinfo = document.getElementById（ 'displayinfo'）;
divinfo.innerhtml = "製品を正常に追加";
}
関数delrow（）{// 2番目の行を削除します
document.getElementById（ 'myTable'）。leterow（1）;
var divinfo = document.getElementById（ 'displayinfo'）;
divinfo.innerhtml = "製品を削除する";
}
function updaterow（）{//行情報を更新します
var urow = document.getElementById（ 'myTable'）。rows [0];
urow.classname = "title";
}
</script>
</head>
<body>
<table cellpadding = "0" cellpacing = "0" id = "myTable">
<tr id = "row1">
<td>本のタイトル</td>
<td>価格</td>
</tr>
<tr id = "row2">
<td>景色のある部屋</td>
<td> $ 30.00 </td>
</tr>
<tr id = "row3">
<td> 60モーメント</td>
<td> $ 32.00 </td>
</tr>
</table>
<入力名= "b1" type = "button" value = "1つの行" onclick = "javascript：addrow（）;" /> <br />
<入力名= "b2" type = "button" value = "2番目の行を削除" onclick = "javascript：delrow（）;" /> <br />
<入力名= "b3" type = "button" value = "title" onclick = "javascript：updaterow（）;" /> <br />
<div id = "displayinfo"> </div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。