在javascript中删除TR表的第一个TD
[英]Remove first TD of a TR Table in javascript
问题描述
I am trying to remove a td at runtime using Javascript only (no JQuery intended).
我试图在运行时仅使用 Javascript 删除 td（不打算使用 JQuery）。 Here is my table :这是我的表：
<table id = "tab">
<tr>
<td>
test 1
</td>
<td>
test 2
</td>
<td>
test 3
</td>
</tr>
</table>
Here is what I tryied :这是我尝试的：
function removeFirstTD() {
var element = document.getElementById("tab");
element.removeChild(element.firstChild);
}
Note that this function works and I execute it by doing this :请注意，此功能有效，我通过执行以下操作来执行它：
<body onload = "removeFirstTD();">
<!-- the tab is here -->
</body>
The problem is that it seems to erase the <tr> because I didn't scope the tr before requesting remove the td.问题是它似乎擦除了<tr>因为在请求删除 td 之前我没有限定 tr。 May someone help me doing this please ?有人可以帮我做这个吗？
6 个解决方案
解决方案1
1 2014-10-27 17:44:57
Maybe the simplest way is to use HTMLTableElement Interface :也许最简单的方法是使用HTMLTableElement Interface ：
function removeFirstTD() {
var element = document.getElementById("tab");
element.rows[0].deleteCell(0);
}
解决方案2
1 2014-10-27 18:14:44
Use can also use querySelector.使用也可以使用querySelector。 It picks the first element that matches it like this;它像这样选择第一个匹配的元素；
function removeFirstTD() {
var element = document.querySelector("#tab tr td");
element.remove();
}
解决方案3
0 已采纳 2014-10-27 17:29:10
再降一级？
element.firstChild.removeChild(element.firstChild);
解决方案4
0 2014-10-27 17:31:06
Due to white space (between the table and tr , and tr and td ) this creates TEXTNODES which will be the first children, you would have to be more specific:由于空白（在table和tr之间，以及tr和td ）这会创建 TEXTNODES 这将是第一个孩子，你必须更具体：
function removeFirstTD() {
var element = document.getElementById('tab');
var firstRow = element.getElementsByTagName('TR')[0];
var firstColumn = firstRow.getElementsByTagName('TD')[0];
firstColumn.remove();
}
But you might find this simpler and more reliable:但您可能会发现这更简单、更可靠：
function removeFirstTD() {
document.querySelector('#tab tr td').remove();
}
解决方案5
0 2014-10-27 17:40:42
You're close.你很接近。 td elements belong to the tr elements (and technically the tr elements should belong to a tbody element, not the table directly). td元素属于tr元素（从技术上讲， tr元素应该属于tbody元素，而不是直接属于table ）。 You need to get the tr elements then find their first children.您需要获取tr元素，然后找到它们的第一tr元素。
function removeFirstTD() {
var element = document.getElementById("tab");
var tr = element.getElementsByTagName('tr');
var j = tr.length;
while (j--){
tr[j].removeChild(tr[j].firstChild);
}
}
Note that firstChild might be whitespace or some other entity that is no the first td element, and you should add a check for that before removing that child.请注意， firstChild可能是空格或其他不是第一个td元素的实体，您应该在删除该子项之前添加检查。
解决方案6
0 2020-07-03 13:45:57
<table class="u-full-width">
<thead>
<tr>
<strong><td>Joke</td></strong>
</tr>
</thead>
<tbody>
<tr>
<td>This is a joke</td>
</tr>
</tbody>
</table>
I'm adding this to give a step by step procedure for beginners like me looking for this answer.我添加这个是为了为像我这样寻找这个答案的初学者提供一个循序渐进的过程。 Let's say above is how our table looks让我们说上面是我们的桌子的样子
First, get a DOM reference to the table body
let tbody = document.querySelector('u-full-width').getElementsByTagName('tbody')首先，获取对表体的 DOM 引用let tbody = document.querySelector('u-full-width').getElementsByTagName('tbody')The above statements return a HTML Collection.
上述语句返回一个 HTML 集合。 So, we take the zero index of that collections tbody = tbody[0]因此，我们取该集合的零索引tbody = tbody[0]tbody.removeChild(tbody.firstElementChild)firstElementChildignores text and comment nodestbody.removeChild(tbody.firstElementChild)firstElementChild忽略文本和注释节点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.