Javascriptでテーブルを動的に作成する

Question

JSのDOMテーブルのヘルプをお願いします。私がボタンをクリックすると、テーブルの例が自動的に作成されます。私はテーブルのタグ、thead、ボーダーとアラインメントセンター、キャプション、データ（行とセルのテキスト）、tfoot、行の削除、行の追加を作成するためのいくつかの関数を記述したい。

私はそれを行う方法がわかりません。

Answer 1

ここでは始めるための例を挙げますが、残りの機能は自分で追加する必要があります。

// get the first button by it's ID, and listen to the click event 
 
// add an empty table to the container div 
 
document.getElementById("btnTable").addEventListener("click", function(){ 
 
\t var basicTable = '<table id="table"></table>'; 
 
    document.getElementById('container').innerHTML = basicTable; 
 
}); 
 

 
// add contents to the table, ADD instead of REPLACE by using the += operator 
 
document.getElementById("btnTableContentsAdd").addEventListener("click", function(){ 
 
\t var tableContents = '<tr><td>Hello world!</td></tr>'; 
 
    document.getElementById('table').innerHTML += tableContents; 
 
}); 
 

 
// remove last table row 
 
document.getElementById("btnTableContentsRemove").addEventListener("click", function(){ 
 
    var lastRow = document.getElementById('table').lastElementChild; 
 
    document.getElementById('table').removeChild(lastRow); 
 
}); 
 

 
// set the border to 1px solid blue 
 
document.getElementById("btnTableBlueBorder").addEventListener("click", function(){ 
 
\t document.getElementById('table').style.border = "1px solid blue"; 
 
}); 
 

 
// set the border to 1px solid red 
 
document.getElementById("btnTableRedBorder").addEventListener("click", function(){ 
 
\t document.getElementById('table').style.border = "1px solid red"; 
 
});

<button id="btnTable">add empty table (invisible)</button> 
 
<button id="btnTableContentsAdd">add table contents</button> 
 
<button id="btnTableContentsRemove">remove table contents</button> 
 
<button id="btnTableBlueBorder">add blue table border</button> 
 
<button id="btnTableRedBorder">add red table border</button> 
 
<div id="container"></div>