deleteRow가 때때로 올바른 행을 삭제하고 때로는 자바 스크립트가 아닌 경우

Question

테이블이 있습니다. 각 행의 끝에는이 행을 삭제하는 href "X"가 있습니다. 이것은 매우 간단합니다. 지금 당신은 어떤 행에 "X"를 클릭하면 2는 2 행을 삭제하지만, 다음 행 3을 클릭하면이 행 4

삭제이 내 코드입니다 :

HTML

<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0"> 
    <tr> 
    <td>Custom0</td> 
    <td><a title="my title text" id="1" href="#" class="someclass" onclick="deleteRows(0)">X</a> 

    </td> 
    </tr> 
    <tr> 
    <td>Custom1</td> 
    <td> <a title="my title text" id="2" href="#" class="someclass" onclick="deleteRows(1)">X</a> 

    </td> 
    </tr> 
    <tr> 
    <td>Custom2</td> 
    <td> <a title="my title text" id="3" href="#" class="someclass" onclick="deleteRows(2)">X</a> 

    </td> 
    </tr> 
    <tr> 
    <td>Custom3</td> 
    <td> <a title="my title text" id="4" href="#" class="someclass" onclick="deleteRows(3)">X</a> 

    </td> 
    </tr> 
    <tr> 
    <td>Custom4</td> 
    <td> <a title="my title text" id="5" href="#" class="someclass" onclick="deleteRows(4)">X</a> 

    </td> 
    </tr> 
    <tr> 
    <td>Custom5</td> 
    <td> <a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(5)">X</a> 

    </td> 
    </tr> 
</table> 

자바 스크립트는

function deleteRows(row) { 
    var tbl = document.getElementById('my_table'); // table reference 
    tbl.deleteRow(row); 
} 

현재 재치를 재생할 수 있습니다 : http://jsfiddle.net/nTJtv/13/

Answer 1

당신의 시간을 ave는 행 번호를 하드 코딩 했으므로 첫 번째 삭제 후에는 동기화되지 않습니다. <table> 요소의 .rows 속성은 "라이브"이므로 하나를 제거하면 더 이상 HTML에서 숫자가 정렬되지 않습니다.

function deleteRows(row) { 
    var tbl = document.getElementById('my_table'); // table reference 
    tbl.getElementsByTagName("tbody")[0].removeChild(row); 
} 

편집 : :이 <tr> 아이입니다 그리고 기능에 removeChild()를 사용

<a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(this.parentNode.parentNode)">X</a> 

을 대신

는 함수에 this.parentNode.parentNode을 전달하고 삭제하는 행을 결정하는 데 사용하는 것이 좋습니다 <tbody> 요소 중 하나이므로 해당 요소가 제거 된 상위 요소 여야합니다.

http://jsfiddle.net/nTJtv/19/

당신이 정말로 오히려 deleteRow() 함께 할 것입니다 경우, 다음 행을 반복 함수에 전달 된 하나를 찾아서 삭제 :

function deleteRows(row) { 
    var tbl = document.getElementById('my_table'); // table reference 
    // Loop over the table .rows collection to find the one passed into the function 
    for (var i=0; i<tbl.rows.length; i++) { 
    if (row == tbl.rows[i]) { 
     // And delete it 
     tbl.deleteRow(i); 
     return; 
    } 
    } 
} 

http://jsfiddle.net/nTJtv/21/

Answer 2

왜를 이런 식으로 해? jQuery를 사용하면 기존 파일/사이트에 추가하기가 어렵지 않습니다.

HTML :

<table id="my_table" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>Custom0</td> 
    <td><span title="my title text" id="1" class="someclass">X</span></td> 
    </tr> 
    <tr> 
    <td>Custom1</td> 
    <td><span title="my title text" id="2" class="someclass">X</span></td> 
    </tr> 
</table> 

자바 스크립트 :

$('.someclass').on('click', function() { 
    $(this).parent().parent().remove(); 
});