Add table row in jQuery

前端 未结 30 2270
既然无缘
既然无缘 2020-11-21 05:40

What is the best method in jQuery to add an additional row to a table as the last row?

Is this acceptable?

$(\'#myTable\').append(\'

        
相关标签:
30条回答
  • 2020-11-21 06:22

    I was having some related issues, trying to insert a table row after the clicked row. All is fine except the .after() call does not work for the last row.

    $('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
    

    I landed up with a very untidy solution:

    create the table as follows (id for each row):

    <tr id="row1"> ... </tr>
    <tr id="row2"> ... </tr>
    <tr id="row3"> ... </tr>
    

    etc ...

    and then :

    $('#traffic tbody').find('tr.trafficBody' + idx).after(html);
    
    0 讨论(0)
  • 2020-11-21 06:22

    This is my solution

    $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
    
    0 讨论(0)
  • 2020-11-21 06:23

    I Guess i have done in my project , here it is:

    html

    <div class="container">
        <div class = "row">
        <div class = "span9">
            <div class = "well">
              <%= form_for (@replication) do |f| %>
        <table>
        <tr>
          <td>
              <%= f.label :SR_NO %>
          </td>
          <td>
              <%= f.text_field :sr_no , :id => "txt_RegionName" %>
          </td>
        </tr>
        <tr>
          <td>
            <%= f.label :Particular %>
          </td>
          <td>
            <%= f.text_area :particular , :id => "txt_Region" %>
          </td>
        </tr>
        <tr>
          <td>
            <%= f.label :Unit %>
          </td>
          <td>
            <%= f.text_field :unit ,:id => "txt_Regio" %>
          </td>
          </tr>
          <tr>
    
          <td> 
            <%= f.label :Required_Quantity %>
          </td>
          <td>
            <%= f.text_field :quantity ,:id => "txt_Regi" %>
          </td>
        </tr>
        <tr>
        <td></td>
        <td>
        <table>
        <tr><td>
        <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
        </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
        </td></tr>
        </table>
        </td>
        </tr>
        </table>
        <% end %>
        <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
        <tr>
        <td>SR_NO</td>
        <td>Item Name</td>
        <td>Particular</td>
        <td>Cost</td>
        </tr>
        </table>
        <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
        </div>
        </div>
        </div>
    </div>
    

    js

    $(document).ready(function() {     
        $('#submit').prop('disabled', true);
        $('#btn_AddToList').click(function () {
         $('#submit').prop('disabled', true);
        var val = $('#txt_RegionName').val();
        var val2 = $('#txt_Region').val();
        var val3 = $('#txt_Regio').val();
        var val4 = $('#txt_Regi').val();
        $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
        $('#txt_RegionName').val('').focus();
        $('#txt_Region').val('');
            $('#txt_Regio').val('');
            $('#txt_Regi').val('');
        $('#btn_AddToList1').click(function () {
             $('#submit').prop('disabled', false).addclass('btn btn-warning');
        });
          });
    });
    
    0 讨论(0)
  • 2020-11-21 06:24

    You can use this great jQuery add table row function. It works great with tables that have <tbody> and that don't. Also it takes into the consideration the colspan of your last table row.

    Here is an example usage:

    // One table
    addTableRow($('#myTable'));
    // add table row to number of tables
    addTableRow($('.myTables'));
    
    0 讨论(0)
  • 2020-11-21 06:24
    <tr id="tablerow"></tr>
    
    $('#tablerow').append('<tr>...</tr><tr>...</tr>');
    
    0 讨论(0)
  • 2020-11-21 06:24

    if you have another variable you can access in <td> tag like that try.

    This way I hope it would be helpful

    var table = $('#yourTableId');
    var text  = 'My Data in td';
    var image = 'your/image.jpg'; 
    var tr = (
      '<tr>' +
        '<td>'+ text +'</td>'+
        '<td>'+ text +'</td>'+
        '<td>'+
          '<img src="' + image + '" alt="yourImage">'+
        '</td>'+
      '</tr>'
    );
    
    $('#yourTableId').append(tr);
    
    0 讨论(0)
提交回复
热议问题