单击按钮时如何删除表格中的行？使用Javascript

Question

带表格和按钮的HTML：

<div>
                <h1>Info</h1>
                <form>
                    <table id="t">
                        <tr>
                            <th></th>
                            <th>index</th>
                            <th>name</th>
                            <th>job</th>
                            <th>date</th>
                            <th>department</th>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>1</td>
                            <td>Alex</td>
                            <td>Hacker</td>
                            <td>100000000000000000</td>
                            <td>2</td>
                        </tr>
                    </table>
                    <br/>
                    <input type="submit" value="delete" onclick="deleteRow()">
                </form>
        </div>

我想删除已建立复选框的行。只需点击一下按钮即可删除。

应该删除的Javascript函数：

function deleteRow() {
    let table = document.getElementById('t')
    let boxs = table.getElementsByTagName("input")
    for (i = 0; i < boxs.length; i++){
        if(boxs[i] == true) {
            table.deleteRow((boxs[i].parentNode.parentNode).rowIndex)
        }
    }
}

我调试了这段代码，正确定义了数组的大小，但没有进入条件。

Answer 1

在您的代码中，您无需进行太多更改。 您需要更改if语句，如下所示。

来自

  

if（boxs [i] == true）{

     

}

要

  

if（boxs [i] .checked == true）{

     

}

因为box [i]是对象。 因此，如果您想获得检查状态，您需要调用boxs [i] .checked。这会给你真/假。

function deleteRow() {

    let table = document.getElementById('t')
    let boxs = table.getElementsByTagName("input")
    for (i = 0; i < boxs.length; i++){
        if(boxs[i].checked == true) {
         table.deleteRow((boxs[i].parentNode.parentNode).rowIndex)
        }
    }
   return false;
}

<div>
    <h1>Info</h1>
    <form onsubmit="return deleteRow()">
        <table id="t">
            <tr>
                <th></th>
                <th>index</th>
                <th>name</th>
                <th>job</th>
                <th>date</th>
                <th>department</th>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
                <td>Alex</td>
                <td>Hacker</td>
                <td>100000000000000000</td>
                <td>2</td>
            </tr>
        </table>
        <br/>
        <input type="submit" value="delete">
    </form>
</div>