2012-03-01 6 views
0

ボタンをクリックするだけでテーブル行を削除する簡単なプログラムを作成しています。しかし、コードは、削除する必要のある行の上にある行を常に削除しています。助けてください。ここでJavascriptは削除する行の上にある行を削除しています

コードです:

JAVASCRIPT:

function deleteRow(){ 

    var rows = document.getElementsByName("chkBox"); 
    alert('rows: '+rows.length); 
    for(var row=0;row<rows.length;row++){ 

     //alert("element id is"+rows[row].id); 
     var rowToDelete = rows[row]; 
     var toBeDelete = rowToDelete.checked; 
     //alert("element value is: "+toBeDelete); 
     if(toBeDelete == true){ 
     alert("row id is: "+rowToDelete.parentNode.parentNode.id); 
     document.getElementById("myTable").deleteRow(rowToDelete.parentNode.parentNode); 
     } 
    } 
} 

はHTML:

<table id="myTable" border="1"> 
<tr id="1"> 
    <td>Row 1</td> 
    <td><input type="checkbox" name="chkBox" id="chkBox_1"/></td> 
</tr> 
<tr id="2"> 
    <td>Row 2</td> 
    <td><input type="checkbox" name="chkBox" id="chkBox_2"/></td> 
</tr> 
<tr id="3"> 
    <td>Row 3</td> 
    <td><input type="checkbox" name="chkBox" id="chkBox_3"/></td> 
</tr> 
</table> 
<button value="Delete" name="Delete" onClick="deleteRow()">Delete</Button> 

Fiddle

答えて

2

インデックスをdeleteRowに渡す必要があります。 deleteRow - MDN

私はこれがあなたのラインがどうあるべきかだと思う:

document.getElementById("myTable").deleteRow(row); 
関連する問題