Question

我试图删除按钮来删除行或使用chkbox和按钮删除行。当我使用deleteRow函数时，它将删除表中的所有行。另外，我已经分配了一个元素id来做其他函数，所以我不能改变关于赋值元素id的addrow函数当我使用删除按钮，它可以做我想要的。我想在选中复选框时删除该行如何使用复选框删除行？这是我的代码：

HTML：

<form>
    <table>
        <tr>
            <td align="center" colspan="3"></td>
        </tr>
    </table>
    <table id="dataTable" class='table table-striped table-hover table-bordered'>
        <tr>
            <td align="center"><b>Product ID:</b></td>
            <td><input type="text" name="productid" id="productid" class="form-control" /></td>
            <td align="center"><b>QTY:</b></td>
            <td><input type="text" name="poqty" id="poqty" class="form- control"></td>
        </tr>

        <tr>
            <input type="button" value="Add Item" onclick="addRow('dataTable')" class="form-control" />
            <input type="button" value="del Item" onclick="deleteRow('dataTable')" class="btn btn-default" />

        </tr>
        <tr>
            <td>
                <input type="submit" value="confirm">
            </td>
        </tr>
        <div id="txtHint"></div>
        <div id="qty123"></div>
        </td>
        </tr>
    </table>
</form>

使用Javascript：

<script language="javascript">
    var y = 0;
    function addRow(tableID) {

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name = "chkbox";
        element1.id = "chkone" + y;
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txtbox1[]";
        element2.id = "txtone" + y;

        cell2.appendChild(element2);

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "txtbox2[]";
        element3.id = "txtre" + y;

        cell3.appendChild(element3);
        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "txtbox3[]";
        element4.id = "qtyone" + y;

        cell4.appendChild(element4);
        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "txtbox4[]";
        element5.id = "txtra" + y;
        cell5.appendChild(element5);
        y++;

    }
</script>

<script>
    function deleteRow(dataTable) {

        var table = document.getElementById(dataTable);
        var row = document.getElementById(dataTable);
        row.parentNode.removeChild(row);
    }

</script>

我想在选中复选框时删除该行，如何使用复选框删除行？

Answer 1

这里可能存在不止一个问题，但对我来说有什么问题：

<input type="button" value="Add Item" onclick="addRow(tableID)" class="form-control" />

您正好将tableID传递给此函数，而您正确地将参数传递给deleteRow（）函数。您的代码中的tableID在哪里？

鉴于您发布的代码，调用addRow（）时没有任何反应，因为函数永远不会被触发 - tableID未定义。

javascript创建删除行功能按钮或复选框

1 个答案: