2012-01-26 7 views
0

Это мой код: Как удалить строку таблицы при нажатии кнопки соответствующей строки?

function deleteHostTable(src) { 
     var table = src.parentNode.parentNode.parentNode; 
     if(table.rows.length > 1) {    
      table.deleteRow(src.parentNode.parentNode); 
     } 
     } 
    function addHost(src) { 
     var table = src.parentNode.parentNode.parentNode; 
     var newRow = table.insertRow(table.rows.length-1); 

     var cell = newRow.insertCell(newRow.cells.length); 

     cell.innerHTML = '<input type="hidden" name = "vtierIdH" value = "vtierId" />' 

     cell = newRow.insertCell(newRow.cells.length); 
     cell.innerHTML = '<img src="images/minus.gif" onclick="deleteHostTable(this);return false;"/>'; 

     cell = newRow.insertCell(newRow.cells.length); 
     cell.className = "pagetitle"; 
     cell.innerHTML = '<input type = "text" value="hstst" />'; 
    } 
</script> 
<html> 
<table id="host#1" index="1"> 
     <tr> 
      <td colspan="10"> 
      <h2 align="left" class="pagetitle">Sub Account Hosts:</h2> 
      </td> 
     </tr> 
     <tr> 
      <input type="hidden" name="vtierIdH" value="<%=vtierId %>" /> 

      <td><button id="minus" onclick="deleteHostTable(this);"/></td> 
      <td class="pagetitle"><input type="text" value="hstst" /></td> 
     </tr> 
     <tr> 
      <td><button onclick="addHost(this);"></td> 
     </tr> 
    </table> 
</html> 

Теперь, когда я нажимаю на кнопку, соответствующую кнопке, этот код удаляет верхний ряд , а не строка, соответствующая этой кнопке, которая нажата. Как я могу удалить строку, соответствующую кнопке в этой строке?

+0

Он ничего не делает. Он даже не удаляет верхнюю строку. –

+0

Пожалуйста, помогите Джону! –

+0

@all ThankYou так много, что ваши ответы действительно элегантны. –

ответ

2

Просто измените функцию удалить с

function deleteHostTable(src) { 
    var row = src.parentNode.parentNode; 
    row.parentNode.removeChild(row); 
} 

Причина это не работает с deleteRow является то, что он ожидает, что индекс строки, которые передаются во время передачи объекта.

1

Вы должны передать «index» в функцию table.deleteRow, а не элемент.

function deleteHostTable(src) { 

    var table = src.parentNode.parentNode.parentNode; 
    var row = src.parentNode.parentNode; 
    for(var i = table.rows.length; i--;) 
    { 
     if (table.rows[i] == row) 
     { 
      table.deleteRow(i); 
      return; 
     } 
    } 

} 

эта функция должна работать.

Вы также можете использовать src.parentNode.parentNode.parentNode.removeChild (src.parentNode.parentNode)

Смежные вопросы