динамически добавлять удаление строк в таблице с помощью JQuery

Question

Я construted своей таблицы следующим образом:

<table id="dataTable"> 
      <thead> 
       <tr><th>Name</th> 
       <th>Value</th></tr> 
      </thead> 
<TR><TD>Scooby Doo</TD><TD>6</TD><TD><INPUT TYPE="Button" onClick="AddRow()" VALUE="Add Row"></TD></TR> 
</table> 

При нажатии на кнопке Добавить строки щелкают, мне нужно изменить кнопки на кнопку удаления и вставить новую строку на первая строка. Первая строка должна содержать то же, что и в коде. Как я могу это сделать?

При нажатии кнопки удаления Imust может удалить строку, к которой принадлежит кнопка удаления?

Answer 1

Что-то вроде?

$('#dataTable thead').prepend('<tr><th>Name</th><th>Value</th></tr>'); 

И для удаления:

$('#dataTable thead tr').click(function() { 
$(this).hide(); //hide the row, this doesn't delete it. 
}); 

.

Answer 2

Надеется, что это помогает

$(function(){ 
    $("input[type='button'].AddRow").toggle(
    function(){ 
     var el = $(this); 
     el.closest('tr').clone(true).prependTo(el.closest('table')); 
     el.attr("value", "Delete row"); 
    }, 
    function(){ 
     $(this).closest('tr').remove();   
    }); 
}); 

<table id="dataTable" border="1"> 
    <thead> 
     <tr> 
      <th> 
       Name 
      </th> 
      <th> 
       Value 
      </th> 
     </tr> 
    </thead> 
    <tr> 
     <td> 
      Scooby Doo 
     </td> 
     <td> 
      6 
     </td> 
     <td> 
      <input type="Button" value="Add Row" class="AddRow"> 
     </td> 
    </tr> 
</table> 

Working Demo