是否可以使用 TableRow.insertCell() 创建一个 TH？答案

【问题标题】：Is it possible to create a TH with TableRow.insertCell()?是否可以使用 TableRow.insertCell() 创建一个 TH？
【发布时间】：2010-12-20 01:35:42
【问题描述】：

我正在使用以下代码向表中动态添加新行：

tbody = document.getElementById('tbody');
tr = tbody.insertRow(-1);
tr.id = 'last';
th = tr.insertCell(0);
td = tr.insertCell(1);

但我实际上得到的是两个td 单元格。如您所见，我想要一个th。

它说tagName 属性不可更改。

我该怎么做？

我需要使用像createElement 和appendChild 这样的“普通”方法吗？

【问题讨论】：

标签： javascript html dom html-table

【解决方案1】：

我没有看到任何官方文档允许您这样做。

W3C Documentation for TR / TR.insertCell

createElement/appendChild 可以工作。

【讨论】：

【解决方案2】：

我让它这样工作：

var table = d3.select("#table");
    table.html("");
    head = table.append("tr");
    head.append("th").text("column_header_1");
    head.append("th").text("column_header_2");

    chartData.forEach(function (obj) {
        row = table.append("tr");
        row.append("td").text(obj.datapoint_1);
        row.append("td").text(obj.datapoint_2);

【讨论】：

【解决方案3】：

我做的是先定义th，比如TableHeaderRow thr = new TableHeaderRow(); 向其中添加单元格，然后将其添加到表格中。

【讨论】：

从示例代码中可以看出，我不想要标题行，而只是标题单元格。

【解决方案4】：

一个快速有效的方法是在 innerHtml 中使用 <b></b> 标签

tbody = document.getElementById('tbody');
tr = tbody.insertRow(-1);
tr.id = 'last';
td = tr.insertCell(1);
th = tr.insertCell(0);
th.innerHtml = '<b>th cell1</b>
th = tr.insertCell(1);
th.innerHtml = '<b>th cell2</b>
//and so on

【讨论】：