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

这里是我的代码：如何删除在JavaScript中创建的表格的选定行？

<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>

我创造出第一个拿到课程的IDNumber当然score.At一种形式，当我填写表格，javascript中创建一个表，所以当我点击“添加”按钮，我可以添加课程。现在，我想添加另一个名为DeleteTableRow()的函数来删除选定的行。

当我创建每门课程表中，我创建了一个复选框列，并设置“ID”为每个行checkbox(td.setAttribute("id","check_box"+(i+1));)所以在DeleteTableRow()功能我用getElementById("check_box"+(j+1))在for循环。

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

来源

2014-12-02 user3789719

代码太多了，对不起。把它切成一个最小的例子。 – 2014-12-02 11:12:14

@丹尼尔罗斯曼。我把它砍下来了，我希望它可读。谢谢。 – user3789719 2014-12-03 07:48:08

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

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

无论如何，如果你使用类似jQuery的东西，那么你的代码会简单得多，这几乎是JavaScript中最近使用的DOM操作的默认值。

来源

2014-12-03 09:09:29

非常感谢，我不太了解JQuery，但我尝试学习并使用它。感谢您的关注。 – user3789719 2014-12-03 09:50:41

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

回答

相关问题