在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>