次のソースをHTMLファイルとして開けばわかる。
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScriptTableTest.html</title>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<style>
body { background-color: #EFEFEF; }
table { border-collapse: collapse;i }
td {
border: solid black 2px;
margin: 0px;
padding: 7px;
text-align: center;
}
th {
border: solid black 2px;
margin: 0px;
padding: 7px;
text-align: center;
}
</style>
<script>
//window.addEventListener("load", test, false);
function test() {
// numクラスのエレメントを取得。
var num = document.getElementsByClassName('num');
// テーブルのエレメントを取得。
var table = document.getElementById('table_id');
// テーブルの子ノードが何個あるかを表示。
alert(table.childNodes.length);
// テーブルの子ノードを全て削除。
for (let i = table.childNodes.length - 1; i >= 0; i--) {
// 削除するノードの名前を表示。
alert(table.childNodes[i].nodeName);
// ノードを削除。
table.removeChild(table.childNodes[i]);
}
// TDのエレメントを作成。
var tdElm = document.createElement('td');
// テキストノードを作成。
var txtNode = document.createTextNode('aiueo');
// テキストノードをTDエレメントに追加。
tdElm.appendChild(txtNode);
// TRのエレメントを作成。
var trElm = document.createElement('tr');
// TRエレメントにTDエレメントを追加。
trElm.appendChild(tdElm);
// テーブルにTRエレメントを追加。
table.appendChild(trElm);
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>hp</th>
</tr>
</thead>
<tbody id="table_id">
<tr>
<td class="num">1</td>
</tr>
<tr>
<td class="num">2</td>
</tr>
<tr>
<td class="num">3</td>
</tr>
<tr>
<td class="num">4</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br>
<br>
<button onclick="test();">test()</button>
</body>
</html>
コメント