[英]Remove first TD of a TR Table in javascript
我試圖在運行時僅使用 Javascript 刪除 td（不打算使用 JQuery）。 這是我的表：
<table id = "tab">
<tr>
<td>
test 1
</td>
<td>
test 2
</td>
<td>
test 3
</td>
</tr>
</table>
這是我嘗試的：
function removeFirstTD() {
var element = document.getElementById("tab");
element.removeChild(element.firstChild);
}
請注意，此功能有效，我通過執行以下操作來執行它：
<body onload = "removeFirstTD();">
<!-- the tab is here -->
</body>
問題是它似乎擦除了<tr>因為在請求刪除 td 之前我沒有限定 tr。 有人可以幫我做這個嗎？
也許最簡單的方法是使用HTMLTableElement Interface ：
function removeFirstTD() {
var element = document.getElementById("tab");
element.rows[0].deleteCell(0);
}
使用也可以使用querySelector。 它像這樣選擇第一個匹配的元素；
function removeFirstTD() {
var element = document.querySelector("#tab tr td");
element.remove();
}
再降一級？
element.firstChild.removeChild(element.firstChild);
由於空白（在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();
}
但您可能會發現這更簡單、更可靠：
function removeFirstTD() {
document.querySelector('#tab tr td').remove();
}
你很接近。 td元素屬於tr元素（從技術上講， tr元素應該屬於tbody元素，而不是直接屬於table ）。 您需要獲取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);
}
}
請注意， firstChild可能是空格或其他不是第一個td元素的實體，您應該在刪除該子項之前添加檢查。
<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>
我添加這個是為了為像我這樣尋找這個答案的初學者提供一個循序漸進的過程。 讓我們說上面是我們的桌子的樣子
首先，獲取對表體的 DOM 引用let tbody = document.querySelector('u-full-width').getElementsByTagName('tbody')
上述語句返回一個 HTML 集合。 因此，我們取該集合的零索引tbody = tbody[0]
tbody.removeChild(tbody.firstElementChild) firstElementChild忽略文本和注釋節點
如何遍歷表tr並獲取第一個td的值？ 的JavaScript
[英]How to iterate through table tr and get the value for first td? JavaScript
首先獲取所有值<td>在一張桌子上<tr>除了第一個使用 Javascript
[英]Get values of all first <td> in a table <tr> except the first using Javascript
JavaScript和DOM：為什么“ <table> “+ =” <tr><td></td></tr> “+ =”
[英]JavaScript and DOM: Why “<table>” += “<tr><td></td></tr>” += “</table” doesn't work?
新增中 <tr><td> 在具有Javascript的div中未在表格中顯示
[英]Adding <tr> <td> within a div with Javascript not showing within the table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.