如何删除在 JavaScript 中创建的表的选定行？答案

【问题标题】：How to delete a selected row of a table created in JavaScript?如何删除在 JavaScript 中创建的表的选定行？
【发布时间】：2014-12-02 11:07:56
【问题描述】：

这是我的代码：

<body>
    <div id="metric_results">

    <div id="form">
        <form name="myForm"  >
        ...//get course IDnumber and course score
        </form>
    </div>

    <div id="table">
    <table id="TABLE" border = '1'>


    </table>
    </div>



 <script type="text/javascript">
    //when click on "add" button,call "addTable" function.
    document.getElementById("add_button").onclick = function() {addTable()};
    document.getElementById("delete_button").onclick = function() {DeleteTableRow()};

    var stock = new Array();
    var i = 0;

    function addTable() {  //create table with 3 column(idnumber,score,checkbox)


        var c = document.createElement("INPUT");
        c.setAttribute("type", "checkbox");
        stock[i] = new Array(id, score);//id= course ID number,score=course score, get from form

        //Create table row and append it to end of table
        var tr = document.createElement('TR');
        for (j = 0; j < 3; j++) {
                var td = document.createElement('TD');
                if(j == 2){
                    td.setAttribute("id","check_box"+(i+1));
                    td.appendChild(c);}
                else{
                td.appendChild(document.createTextNode(stock[i][j]));}
                tr.appendChild(td);
                }
        table.appendChild(tr);

        i=i+1
    }

// Delete courses that their checkbox is on.
    function DeleteTableRow(){
    var check_boxes=new Array();
    for(j=0; j<i ;j++){
    check_boxes[j]= document.getElementById("check_box"+(j+1));
    if(check_boxes[j].checked==true){document.getElementById("TABLE").deleteRow(j+1);}      
    }
</script>
</body>

我创建了一个获取课程编号和课程分数的表格。首先，当我填写表格时，javascript 创建一个表格，因此当我单击“添加”按钮时，我可以添加课程。现在，我想添加另一个名为 DeleteTableRow() 的函数来删除选定的行。

当我为每门课程创建表时，我创建一个复选框列并为每一行设置“id”checkbox(td.setAttribute("id","check_box"+(i+1));)，因此在DeleteTableRow() 函数中，我在 for 循环中使用getElementById("check_box"+(j+1))。

一切正常，但我无法检查复选框的值，也无法删除选定的行。我应该怎么做以及如何检查？

【问题讨论】：

代码太多，抱歉。把它简化为一个最小的例子。
@Daniel Roseman。我把它删掉了。我希望它是可读的。谢谢。

标签： javascript html django-templates

【解决方案1】：

您的主要问题是在您的 addTable 函数中，您在表格单元格上设置了 id 属性，而不是复选框。自然，单元格没有选中属性。您可以通过在循环之前对c 执行setAttribute('id', ...) 来解决此问题。

请注意，您的代码有一些奇怪的地方 - 例如，您应该在定义新数组时真正使用文字 []，而不是 new Array() 调用；但话虽如此，首先似乎不需要check_boxes 数组，因为您从不使用它。

无论如何，如果您使用 jQuery 之类的东西，您的代码会简单得多，这几乎是当今在 Javascript 中进行 DOM 操作的默认设置。

【讨论】：

非常感谢，我不太了解JQuery，但我尝试学习并使用它。感谢您的关注。