javascript - 在前面插入 th

Question

我想在表格的元素th内插入一个标签。我正在使用在下创建的行对象的方法，实际上是在插入。有没有不使用任何 JS 库的 JavaScript 解决方案？trtheadinsertCelltable.tHeadtd

更新 目前我正在使用与Minko Gechev和gaurav提供的解决方案相同的东西。我想知道是否有像使用这样的干净解决方案insertCell？

Answer 1

您也可以按照最初的要求使用 insertCell 方法。您只需更改 outerHTML 以覆盖<td>由 insertCell 方法创建的：

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

你可以用普通的 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在运行时创建一个并将其插入到您的头中。

Answer 4

您可以通过更改其原型将此功能添加到本机 HTMLTableRowElement：

HTMLTableRowElement.prototype.insertCell = (function(oldInsertCell) {
    return function(index) {
        if (this.parentElement.tagName.toUpperCase() == "THEAD") {
            if (index < -1 || index > this.cells.length) {
                // This case is suppose to throw a DOMException, but we can't construct one
                // Just let the real function do it.
            } else {
                let th = document.createElement("TH");
                if (arguments.length == 0 || index == -1 || index == this.cells.length) {
                    return this.appendChild(th);
                } else {
                    return this.insertBefore(th, this.children[index]);
                }
            }
        }
        return oldInsertCell.apply(this, arguments);
    }
})(HTMLTableRowElement.prototype.insertCell);

运行此代码后，任何新的 HTMLTableRowElements（“td”标签）都将检查父标签是否为 thead 标签。如果是这样，它将执行与 insertCell 相同的功能，但使用 th 标记。如果没有，它将只使用原始的 insertCell 功能。

document.querySelector("thead > tr").insertCell(); // inserts a th into a tr inside a thead
document.querySelector(":not(thead) > tr").insertCell(); // inserts a td into a tr not inside a thead

请注意，一般不建议扩展原生对象。