Question

我试图在运行时使用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的范围。愿有人帮我这样做吗？

Answer 1

也许最简单的方法是使用HTMLTableElement Interface：

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

A live demo at jsFiddle

Answer 2

使用也可以使用querySelector。它选择匹配它的第一个元素;

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

Answer 3

再往下一级？

element.firstChild.removeChild(element.firstChild);

Answer 4

由于空格（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();
}

Answer 5

你很亲密。 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元素的实体，您应该在删除该子元素之前添加一个检查。

Answer 6

    <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>

我正在添加此代码，以便为像我这样的初学者提供逐步的过程，以寻找答案。上面说的是表格的外观

首先，获取对表主体let tbody = document.querySelector('u-full-width').getElementsByTagName('tbody')
的DOM引用
以上语句返回HTML集合。因此，我们采用该集合tbody = tbody[0]
的零索引
tbody.removeChild(tbody.firstElementChild) firstElementChild忽略文本和注释节点

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

6 个答案: