Javascript 在头中插入 th
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14999927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert th in thead
提问by Moazzam Khan
I want to insert a thtag inside trof theadelement of a table. I am using insertCellmethod of row object created under table.tHead, which is actually inserting td. Is there any JavaScript solution without using any JS library?
我想在表格的元素th内插入一个标签。我正在使用在 下创建的行对象的方法，它实际上是插入. 有没有不使用任何 JS 库的 JavaScript 解决方案？trtheadinsertCelltable.tHeadtd
UpdateCurrently I am using something same as solution provided by Minko Gechevand gaurav. I want to know if there is any clean solution like using insertCell?
更新目前我使用的东西与Minko Gechev和gaurav提供的解决方案相同。我想知道是否有任何干净的解决方案，例如使用insertCell？
采纳答案by Minko Gechev
You can do it with vanilla JavaScript. Try this:
你可以用普通的 JavaScript 来做到这一点。尝试这个：
HTML
HTML
<table id="table">
<thead>
<tr>
<th>First</th>
</tr>
<thead>
</table>
JavaScript
JavaScript
var tr = document.getElementById('table').tHead.children[0],
th = document.createElement('th');
th.innerHTML = "Second";
tr.appendChild(th);
Here is an example http://codepen.io/anon/pen/Bgwuf
回答by steven
You can also use the insertCell method as originally requested. You just have to change the outerHTML to overwrite the <td>created by the insertCell method:
您还可以按照最初的要求使用 insertCell 方法。你只需要改变outerHTML来覆盖<td>由insertCell方法创建的：
var table = document.createElement("TABLE")
var row = table.insertRow(0);
row.insertCell(0).outerHTML = "<th>First</th>"; // rather than innerHTML
To match the example given:
要匹配给出的示例：
HTML
HTML
<table id="table">
<thead>
<tr>
<th>First</th>
</tr>
<thead>
</table>
Javascript
Javascript
var tr = document.getElementById('table').tHead.children[0];
tr.insertCell(1).outerHTML = "<th>Second</th>" // some browsers require the index parm -- 1
回答by Gaurav Pandey
Use table.tHead.children[0].appendChild(document.createElement("th"))method instead. Basically you have to create a that runtime and insert it into your thead.
改用table.tHead.children[0].appendChild(document.createElement("th"))方法。基本上，您必须th在运行时创建一个并将其插入到您的头中。
回答by Jonathan Gawrych
You can add this functionality to the native HTMLTableRowElement by changing it's prototype:
您可以通过更改它的原型来将此功能添加到本机 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);
After this code is run, any new HTMLTableRowElements ("td" tags) will check to see if the parent is a thead tag. If so, it will do the same functionality as insertCell, but using a th tag instead. If not, it will just use the original insertCell functionality.
运行此代码后，任何新的 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
Note that it is generally notrecommended to extend the native objects.
请注意，通常不建议扩展本机对象。
