在javascript中删除TR表的第一个TD

Remove first TD of a TR Table in javascript

本文关键字：第一个 TD TR javascript 删除      更新时间：2023-09-26

我试图在运行时仅使用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接口：

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

jsFiddle的现场演示。

Use也可以使用querySelector。它选择与它匹配的第一个元素，如下所示；

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

再下一级？

element.firstChild.removeChild(element.firstChild);

由于空白（在table和tr之间，以及tr和td之间），这将创建TEXTNODE，它将是第一个子级，您必须更具体：

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元素，然后找到它们的第一个子元素。

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>

我添加这个是为了给像我这样的初学者提供一个循序渐进的过程来寻找这个答案。让我们说上面是我们的表看起来如何

  1. 首先，获取对表体let tbody = document.querySelector('u-full-width').getElementsByTagName('tbody')的DOM引用

  2. 上面的语句返回一个HTML集合。因此，我们取集合tbody = tbody[0] 的零索引

  3. tbody.removeChild(tbody.firstElementChild) firstElementChild忽略文本和注释节点

相关文章：