[javascript] 在jQuery中添加表格行


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>

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

Question

jQuery中最好的方法是將最後一行添加到表中作為最後一行?

這可以接受嗎?

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

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




你可以使用這個很棒的jQuery添加表格行函數。 它適用於擁有<tbody>而沒有的表。 此外,它還考慮到您最後一個表格行的colspan。

以下是一個示例用法:

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



我遇到了一些相關的問題,試圖在點擊行之後插入一個表格行。 除了.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);



如果你有一個<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>");



我發現這個AddRow插件對於管理表格行非常有用。 儘管如果你只需要添加一個新行,盧克的solution將是最合適的。




    // 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);



我建議

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

而不是

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

firstlast關鍵字在第一個或最後一個標籤last起作用,而不是關閉。 因此,如果不希望嵌套表被更改,而是添加到整個表中,則這對嵌套表格更好。 至少,這是我發現的。

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



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

首先找出長度或行數:

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

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

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



<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');



這是我的解決方案

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



<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

用javascript函數編寫

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';



我以這種方式解決了這個問題,我認為它是最可讀的:)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )



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

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



以一種簡單的方式:

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



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

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

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



Related