dynamically add remove rows in table using jquery

后端 未结 2 1625
说谎
说谎 2020-12-10 21:34

I have construted my table as follows:

    
相关标签:
2条回答
  • 2020-12-10 22:08

    Something like?

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

    And for the deleting:

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

    .

    0 讨论(0)
  • 2020-12-10 22:22

    Hope this helps

    $(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

    0 讨论(0)
提交回复
热议问题
Name