html 행의 삭제 아이콘을 클릭 할 때 배열에서 항목을 제거합니다.

Question

나는 약간의 문제가 있습니다. 객체의 배열에서 항목을 추가, 제거 및 편집하려고합니다. HTML 표에 내용을 표시하지만 양식을 제출하지 않아도됩니다. 지금까지 (데이비드 Calhoun 덕분에) 항목을 추가 할 수 있었지만 지금은 행 인덱스 (삭제 이미지를 클릭 할 때)를 얻는 방법을 모르기 때문에 새로운 문제에 직면하여 삭제할 수 있습니다. 그 행. 이것을 달성 할 수있는 방법이 있습니까?

여기 내 코드

<script> 

var table = []; 
function addDetail() 
{ 
    table.push({    
     price: document.getElementById('price').value, 
     description: document.getElementById('descripcion').value 
    }); 

    showRow(table.length-1); 
    resetEntries(); 

} 
function resetEntries() 
{ 
    document.getElementById('price').value=''; 
    document.getElementById('descripcion').value=''; 
    document.getElementById('price').focus(); 

} 

function showRow(i) 
{ 
    if (table.length>0){ 
     var tbl = document.getElementById('tabla_estilo'); 

     var newRow = tbl.insertRow(tbl.rows.length); 
     var cell1 = newRow.insertCell(0); 
     cell1.textAlign='center'; 
     cell1.innerHTML='<a href="#"><img src="images/edit.png" width="14" height="14" alt="Edit"/></a>' 

     var cell2 = newRow.insertCell(1); 
     cell2.textAlign='center'; 
     cell2.innerHTML='<a href="#" class="delete"><img src="images/delete.png" width="14" height="14" alt="Delete"/></a>' 

     var cell3 = newRow.insertCell(2); 
     cell3.textAlign='center'; 
     cell3.innerHTML=table[i].price; 

     var cell4 = newRow.insertCell(3); 
     cell4.textAlign='center'; 
     cell4.innerHTML=table[i].description;   
    } 
} 

입니다 그리고 여기 내 양식 JQuery와와

Answer 1

delete 버튼의 onclick 핸들러에서 <tr>까지 트래버스 한 다음 해당 행의 rowIndex 속성을 가져올 수 있습니다. 그래서 온 클릭에

:

이

var cell2 = newRow.insertCell(1); 
cell2.textAlign='center'; 
cell2.innerHTML='<a href="#" class="delete"><img src="images/delete.png" width="14" height="14" alt="Delete"/></a>' 

cell2.firstChild.onclick = function() { 
    var node = this.parentNode; 
    while(node && node.tagName !== 'TR') { 
     node = node.parentNode; 
    } 
    var index = node.rowIndex; 
    alert('index'); 
    return false; 
} 

이 각 행에 대한 새로운 함수를 만듭니다 : 당신이 당신의 행 세포를 설정하는 경우

var node = this.parentNode; 
while(node && node.tagName !== 'TR') { 
    node = node.parentNode; 
} 

var index = node.rowIndex; 

그래서, 당신은 핸들러를 추가 할 수 있습니다. 대신 명명 된 함수를 참조하는 것이 좋습니다.

Answer 2

이 선택 중 하나를 사용하여 보이는 방법

$('table tr').each(function(i, v) { alert((i+1) + ' row') }); 

$('table tr:nth-child(i)').hide(); 

또는

<a href="#" class="delete" onclick="$(this).parent().parent().hide()"> 

Answer 3

당신은 배열의 요소의 인덱스를 저장하기에 사용자 지정 특성을 사용하여 테이블에 새 행을 만들 때 : 당신의 행 요소와 동일한 순서로 항상있는 경우,

<tr position='0'><td></td><td></t></tr> 
<tr position='1'><td></td><td></t></tr> 
<tr position='2'><td></td><td></t></tr> 
<tr position='3'><td></td><td></t></tr> 

또는 배열에서이 행 앞에 몇 개의 형제가 있는지 확인할 수 있습니다.

테이블에서 행의 순서를 바꾸면 여전히 작동하므로 첫 번째 방법을 사용합니다.

행을 삭제하면 행 위치 속성을 다시 계산해야합니다.