Question

我要求你帮助JS中的DOM表。单击按钮时，表格将自动创建示例文本。我想为create table标签，thead，border和align center，caption，data（带文本的行和单元格），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(){
	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(){
	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(){
	document.getElementById('table').style.border = "1px solid blue";
});

// set the border to 1px solid red
document.getElementById("btnTableRedBorder").addEventListener("click", function(){
	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>

在Javascript中动态创建表

1 个答案: