Question

我想在表格的th元素的tr内插入thead标记。我正在使用insertCell下创建的行对象的table.tHead方法，该方法实际上是插入td。有没有使用任何JS库的JavaScript解决方案？

更新目前，我使用的内容与Minko Gechev和gaurav提供的解决方案相同。我想知道是否有任何干净的解决方案，比如使用insertCell？

Answer 1

您也可以按原始请求使用insertCell方法。您只需更改outerHTML以覆盖insertCell方法创建的<td>：

var table = document.createElement("TABLE")
var row   = table.insertRow(0);
    row.insertCell(0).outerHTML = "<th>First</th>";  // rather than innerHTML

匹配给出的例子：

<强> HTML

<table id="table">
  <thead>
    <tr>
      <th>First</th>
    </tr>
  <thead>
</table>

<强>的Javascript

var tr = document.getElementById('table').tHead.children[0];
    tr.insertCell(1).outerHTML = "<th>Second</th>"  // some browsers require the index parm -- 1

Answer 2

你可以用vanilla JavaScript做到这一点。试试这个：

<强> HTML

<table id="table">
  <thead>
    <tr>
      <th>First</th>
    </tr>
  <thead>
</table>

<强>的JavaScript

var tr = document.getElementById('table').tHead.children[0],
    th = document.createElement('th');
th.innerHTML = "Second";
tr.appendChild(th);

以下是http://codepen.io/anon/pen/Bgwuf

的示例

Answer 3

请改用table.tHead.children[0].appendChild(document.createElement("th"))方法。基本上你必须在运行时创建一个th并将其插入你的thead。

在thead中插入

3 个答案: