删除javascript中TR表的第一个TD_Javascript

删除javascript中TR表的第一个TD

javascript

删除javascript中TR表的第一个TD,javascript,Javascript,我试图在运行时仅使用Javascript删除td（不使用JQuery）。这是我的桌子： <table id = "tab"> <tr> <td> test 1 </td> <td> test 2 </td> <td> test 3 <

我试图在运行时仅使用Javascript删除td（不使用JQuery）。这是我的桌子：

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

请注意，此函数起作用，我通过执行以下操作来执行它：

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

问题是它似乎删除了

，因为我在请求删除td之前没有对tr进行范围限定。有人能帮我做这个吗？

再往下一层

element.firstChild.removeChild(element.firstChild);

由于空白（在

表

和

tr

之间，以及

tr

和

td

之间），这将创建文本节点，这些节点将是第一个子节点，您必须更加具体：

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

元素，而不是直接属于

表

）。您需要获取

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

元素的其他实体，在删除该子元素之前，您应该添加一个检查。

可能最简单的方法是使用：

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

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


笑话
这是个笑话

我添加这个是为了给像我这样的初学者提供一个循序渐进的过程来寻找这个答案。让我们假设上面是我们桌子的外观

首先，获取对表体的DOM引用

let tbody=document.querySelector（'u-full-width'）。getElementsByTagName（'tbody'）

上述语句返回一个HTML集合。因此，我们取集合的零索引

tbody=tbody[0]

tbody.removeChild（tbody.firstElementChild）

firstElementChild

忽略文本和注释节点

@Zeratops将此与您在帖子中的HTML一起发布。感谢您的支持。我要试试这个，解释得很好！

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

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

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