javascript table cell - 在jQuery中添加表行



15 Answers

jQuery有一個內置的工具來動態操作DOM元素。

您可以像這樣向表中添加任何內容:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery中的$('<some-tag>')是一個標籤對象,它可以有幾個可以設置和獲取的attr屬性,以及text ,它代表標籤之間的文本: <tag>text</tag>

這是一些非常奇怪的縮進,但是你更容易看到這個例子中發生了什麼。

value example datatable

jQuery中最後一行向表中添加額外行的最佳方法是什麼?

這可以接受嗎?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

你可以添加到這樣的表(例如輸入,選擇,行數)的限制是什麼?




如果你有<tbody><tfoot>怎麼辦?

如:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

然後它會在頁腳中插入新行 - 而不是身體。

因此,最好的解決方案是包含<tbody>標籤並使用.append ,而不是.after

$("#myTable > tbody").append("<tr><td>row content</td></tr>");



我建議

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

而不是

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

firstlast關鍵字適用於要啟動的第一個或最後一個標記,而不是關閉。 因此,如果您不希望更改嵌套表,而是添加到整個表中,則嵌套表會更好。 至少,這是我發現的。

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>



這可以使用jQuery的“last()”函數輕鬆完成。

$("#tableId").last().append("<tr><td>New row</td></tr>");



我遇到了一些相關的問題,嘗試在單擊的行之後插入一個表行。 一切都很好,除了.after()調用不適用於最後一行。

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

我找到了一個非常不整潔的解決方案:

按如下方式創建表(每行的id):

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

等......

然後 :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);



您可以使用這個偉大的jQuery添加表行功能。 它適用於具有<tbody>但沒有的表。 此外,它還考慮了您上一個表行的colspan。

以下是一個示例用法:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));



    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);



我發現這個AddRow插件對於管理表行非常有用。 但是,如果您只需要添加新行,Luke的solution將是最佳選擇。




這是一些hacketi hack代碼。 我想在HTML頁面中維護一個行模板。 表行0 ... n在請求時呈現,此示例具有一個硬編碼行和一個簡化模板行。 模板表是隱藏的,行標記必須位於有效表中,否則瀏覽器可能會將其從DOM樹中刪除。 添加行使用計數器+ 1標識符,並在數據屬性中維護當前值。 它保證每一行都有唯一的URL參數。

我已經在Internet Explorer 8,Internet Explorer 9,Firefox,Chrome,Opera, Nokia Lumia 800Nokia C7 (使用Symbian 3),Android stock和Firefox beta瀏覽器上運行測試。

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS:我向jQuery團隊提供所有學分; 他們應得的一切。 沒有jQuery的JavaScript編程 - 我甚至不想想那個噩夢。




我猜我已經完成了我的項目,這裡是:

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');
    });
      });
});



因為我也有一個方法在最後或任何特定的地方添加行所以我想我也應該分享這個:

首先找出長度或行:

var r=$("#content_table").length;

然後使用下面的代碼添加你的行:

$("#table_id").eq(r-1).after(row_html);



<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

您可以緩存頁腳變量並減少對DOM的訪問(注意:使用假行而不是頁腳可能會更好)。

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")



$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

將向表的第一個 TBODY添加一個新行,而不依賴於任何THEADTFOOT 。 (我沒有找到來自哪個版本的jQuery .append()這種行為是存在的。)

您可以在以下示例中嘗試:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

在哪個示例中, ab行在1 2之後插入,而不是在第二個示例中的3 4之後插入。 如果表是空的,jQuery會為新行創建TBODY




以一種簡單的方式:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');



這是我的解決方案

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');





Related