我使用Javascript动态创建表，并希望在每行的开头创建一个标题样式的单元格。所以我的问题是如何执行此操作，因为insertCell只创建了一个普通的<td>元素，而不是<th>。
我尝试过的一些事情（通过w3schools的Tryit编辑器;我没有理由怀疑任何其他用法会有不同的表现）并且不起作用：
我看到了一个建议，即独立创建<th>元素，然后将其作为子元素添加到<tr>元素中。但是，当我这样做时，它不会被添加为表格单元格，即它不受表格边框的影响，不计入单元格数组（即如果你执行insertCell(1)，它会在第一个之后插入单元格不计算<th>），并且没有得到<th>单元格的特殊粗体/中心格式。
我尝试使用insertCell制作虚拟单元格，然后replaceChild使用独立创建的单元格;这与上面的结果相同。
我尝试通过insertCell创建一个<td>单元格，只需加粗并手动居中，但myCell.style.fontWeight="bold"和myCell.align="center"似乎无效（他们只是结束函数，就像JavaScript中的坏命令一样），同样尝试使用CSS也行不通。所以也许我只是有错误的语法或东西，但我不知道该怎么做。任何帮助将不胜感激。
尝试1：
<!DOCTYPE html>
<html>
<body>
<p>Click the button to insert new cell(s) at the end of the table row.</p>
<table border="1">
<th>1</th>
<td>2</td>
</tr>
<tr id="myRow">
</tr>
<tr>
</table><br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var newRow = document.getElementById("myRow");
var header=document.createElement("th").appendChild(document.createTextNode("a"));
newRow.appendChild(header);
var enablesLoc=newRow.insertCell(0).appendChild(document.createTextNode("b"));
}
</script>
</body>
</html>
结果：“1”用边框加粗，“2”和“b”用边框解开（因为它们应该是），“a”是无边框的，没有边框。
尝试2：
<!DOCTYPE html>
<html>
<body>
<p>Click the button to insert new cell(s) at the end of the table row.</p>
<table border="1">
<th>1</th>
<td>2</td>
</tr>
<tr id="myRow">
</tr>
<tr>
</table><br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var newRow = document.getElementById("myRow");
var header=newRow.insertCell(0).appendChild(document.createTextNode("a"));
header.style.fontWeight="bold";
var enablesLoc=newRow.insertCell(1).appendChild(document.createTextNode("b"));
}
</script>
</body>
</html>
结果：该按钮添加了单元格“a”unbolded但不添加单元格“b”。
答案 0 :(得分：3)
以下代码显示了应该让您前进的所有内容：
function addTable(){
var table = document.createElement("table");
var tr = document.createElement("tr");
var th = document.createElement("th");
var td = document.createElement("td");
td.innerText = "im a td";
th.innerText = "im a th";
tr.appendChild(th);
tr.appendChild(td);
table.appendChild(tr);
var out = document.getElementById("out");
out.appendChild(table);
}
您必须调用该函数，并且ID为<div id=out>...</div>的div必须位于文档中。 免责声明：我只在Chrome中测试了此代码
你写了I've seen a suggestion to create the <th> element independently and then add it to the <tr> element as a child. When I do this
it is not added as a table cell你是什么意思和你使用什么命令，is not affected by the table border原因可能是因为它不包含文字，does not count toward the array of cells (i.e. if you do insertCell(1)我也不明白这一点。根据{{3}}上的规范，它会插入一个空的td并返回一个引用。所以insertCell没有数组，如果你尝试var table = document.getElementById("myTable")然后table.rows[0].cells.length，它会返回包含th - 单元格的单元格数。 it inserts after the first cell not counting the th根据我的测试，至少在chrome中，情况并非如此;这取决于你如何调用方法：table.rows[1].insertCell(-1);在末尾添加第二行（基于零的数组）的单元格，table.rows[2].insertCell(1);在第三行添加位置2的单元格（再次基于零）如果使用table.rows[3].insertCell(0);，则将单元格插入第4个单元格。开头一行，and does not get the special bold/center format for a th cell对我来说情况并非如此免责声明：我只在Chrome中测试了此代码
html
<button onclick="addRow()">add rows</button><br />
<button onclick="addColumn()">add column</button>
<table border="1" id="myTable">
<tr>
<th>1</th>
<td>2</td>
</tr>
</table>
和javascript
function addRow()
{
var table = document.getElementById("myTable");
var tr = document.createElement("tr");
var th = document.createElement("th");
var td = document.createElement("td");
td.innerText = "im a td";
th.innerText = "im a th";
tr.appendChild(th);
tr.appendChild(td);
table.appendChild(tr);
}
function addColumn(){
var table = document.getElementById("myTable");
var rows = table.rows;
console.log("rows", rows);
for (var i = 0; i < rows.length; ++i) {
// td = rows[i].cells;
var td = document.createElement("td");
td.innerText = i;
rows[i].appendChild(td);
}
}
基于 insertCell ，您无法使用insertCell，因为它Insert[s] an empty TD cell into this row。但是你想添加一个th
根据 DOM Level 2 HTML ，您可以使用appendChild，因为它adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.
因此，您必须按正确的顺序创建元素：创建行，将第一个单元格添加为th，然后使用append child将其他单元格添加为td。
您可以查看 DOM Level 3 Core
答案 1 :(得分：1)
.appendChild() method返回附加的元素。这就意味着这一行：
var header=document.createElement("th").appendChild(document.createTextNode("a"));
...你的header变量实际上是文本节点，而不是th元素 - 所以newRow.appendChild(header);只将文本节点附加到行，而不是新行。
尝试这样的事情：
var newRow = document.getElementById("myRow");
var header = document.createElement("th");
header.appendChild(document.createTextNode("a"));
newRow.appendChild(header);
请注意，如果您确实要追加新行，那么您的newRow变量不应该获取对表中现有行的引用，您应该为表提供一个id：
<table id="myTable">
...然后创建一个新行并将其添加到表中：
var table = document.getElementById("myTable");
var newRow = document.createElement("tr");
table.appendChild(newRow);
演示：http://jsfiddle.net/PtzRL/1/
（另请注意，您显示的起始html有错误：您错过了<tr>标记后的第一个<table>，并且您之前还有一个额外的<tr>关闭</table>代码。）
答案 2 :(得分：1)
这是你想要做的吗？
function myFunction = function() {
var newRow, newHeader, newCell;
newRow = document.getElementById("myRow");
newHeader = document.createElement("th");
newHeader.innerText = "a";
newRow.appendChild(newHeader);
newCell = document.createElement("td");
newCell.innerText = "b";
newRow.appendChild(newCell);
}
如果您希望按钮添加新行而不是填入您已放置的空白行，请尝试以下操作： HTML：
<body>
<table id="myTable" border="1">
<tr>
<th>1</th>
<td>2</td>
</tr>
</table>
<button onclick="myFunction()">Try it</button>
</body>
JavaScript的：
function myFunction = function() {
var myTable, newRow, newHeader, newCell;
myTable = document.getElementById("myTable");
newRow = document.createElement("tr");
newHeader = document.createElement("th");
newHeader.innerText = "a";
newRow.appendChild(newHeader);
newCell = document.createElement("td");
newCell.innerText = "b";
newRow.appendChild(newCell);
myTable.appendChild(newRow);
}
答案 3 :(得分：0)
这个功能需要改变，我相信...
function myFunction()
{
var newRow = document.getElementById("myRow");
var header=document.createElement("th");
header.appendChild(document.createTextNode("a"));
newRow.appendChild(header);
var enablesLoc=newRow.insertCell(0);
enables.appendChild(document.createTextNode("b"));
}