Question

这是我的代码：

<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会创建一个表格，所以当我点击＆＃34;添加＆＃34;按钮，我可以添加课程。现在，我想添加另一个名为DeleteTableRow()的函数来删除选定的行。

当我为每门课程创建表格时，我会创建一个复选框列并设置＆＃34; id＆＃34;对于每一行checkbox(td.setAttribute("id","check_box"+(i+1));)所以在DeleteTableRow()函数中我在for循环中使用getElementById("check_box"+(j+1))。

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

Answer 1

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

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

在任何情况下，如果使用像jQuery这样的东西，你的代码会简单得多，这几乎是在Javascript中进行DOM操作的默认设置。

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

1 个答案: