如何刪除在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中創建的表格的選定行？

回答

相關問題