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

时间:2014-12-31 15:12:03

标签: javascript

我试图删除按钮来删除行或使用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>

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

1 个答案:

答案 0 :(得分:0)

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

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

您正好将tableID传递给此函数,而您正确地将参数传递给deleteRow()函数。您的代码中的tableID在哪里?

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