在javascript中刪除TR表的第一個TD

我想在運行時使用Javascript僅刪除td（沒有JQuery打算）。這裏是我的表：在javascript中刪除TR表的第一個TD

<table id = "tab"> 
    <tr> 
     <td> 
      test 1 
     </td> 
     <td> 
      test 2 
     </td> 
     <td> 
      test 3 
     </td> 
    </tr> 
</table>

這是我tryied：

function removeFirstTD() { 
    var element = document.getElementById("tab"); 
    element.removeChild(element.firstChild); 
}

請注意，此功能的工作原理和我做這個執行：

<body onload = "removeFirstTD();"> 
    <!-- the tab is here --> 
</body>

的問題是，它似乎刪除了<tr>，因爲我在請求刪除td之前沒有對tr進行範圍。有人可以幫我做這個嗎？

來源

2014-10-27 Anwar Nairi

再往下一級？

element.firstChild.removeChild(element.firstChild);

來源

2014-10-27 17:29:10

它的作品謝謝你！ – 2014-10-27 17:44:51

@Zeratops這個[不起作用]（http://jsfiddle.net/t3u9dntd/）與你在帖子中的HTML。 – Teemu 2014-10-27 17:46:18

由於白色空間（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(); 
}

來源

2014-10-27 17:31:06

你很近。 td元素屬於tr元素（技術上tr元素應該屬於tbody元素，而不是table直接）。你需要獲得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元素，你應該刪除這個孩子之前添加該支票。

來源

2014-10-27 17:40:42 lincolnk

謝謝您的支持。我將嘗試這一個，爲解釋做好工作！ – 2014-10-28 07:51:41

也許最簡單的方法是使用HTMLTableElement Interface：

function removeFirstTD() { 
    var element = document.getElementById("tab"); 
    element.rows[0].deleteCell(0); 
}

A live demo at jsFiddle。

來源

2014-10-27 17:44:57 Teemu

使用還可以使用querySelector。它會像這樣選擇匹配它的第一個元素;

function removeFirstTD() { 
    var element = document.querySelector("#tab tr td"); 
    element.remove(); 
}

來源

2014-10-27 18:14:44

在javascript中刪除TR表的第一個TD

回答

相關問題