jQueryにテーブル行を追加する

2425

最後の行としてテーブルに行を追加するjQueryの最良の方法は何ですか？

これは受け入れられますか？

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

このようなテーブルに追加できるもの（入力、選択、行数など）に制限はありますか？

javascript  jquery  html-table 
— ダリルハイン
ソース
2
Thxs Ash。私もjQueryを学習しているだけで、特に簡単な方法で最善の方法を見つけるのが難しいことに気づいています。質問が2つある理由は、1つ投稿してから約1時間後に、もう1つを入力するべきだと気づき、最初の質問を変更するべきだとは思わなかったからです。
— ダリルハイン
30
このため：google.com/search
— ダリルハイン
17
参考までに-複数の追加を使用しないでください（パフォーマンスが大幅に低下します）。文字列を作成するか、はるかに高速なJavaScript結合を使用します。
— Gerrit Brink、2010
— スーパーモデル
行が複雑すぎる場合に備えて、最初の行を必要な構造で非表示にし、クローンを作成してテキストを変更し、最初の行の後に挿入します。これにより、ajax応答からデータをフェッチすると、テーブルが作成されます。覚えておいてください。ループの外側でクローンを作成し、それを使用してループの内側のコンテンツを変更します。$（ "＃mainTable tbody"）。append（row）; 行は変更されたクローンのコピーです:)
— Aadam

回答:

2143

あなたが提案するアプローチはあなたが探している結果をあなたに与えることを保証されていません- tbody例えばあなたが持っていたらどうでしょう：

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

次のようになります。

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

したがって、代わりにこのアプローチをお勧めします。

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

内に何でも含めることができます after()メソッド上記の例のように複数の行を含め、有効なHTMLで。

更新：この質問での最近の活動に続いて、この回答を再訪します。まぶたがないことtbodyは、DOM には常にaが存在することになるといいコメントをしています。これは真実ですが、少なくとも1つの行がある場合に限ります。行がない場合は、tbody自分で指定し限り。

DaRKoN_ はtbody、最後にコンテンツを追加するのではなく、に追加することをお勧めしtrます。これは行がないという問題を回避しますが、理論的には複数にすることができるため、完全ではありませんtbody要素を持ち、各行に行が追加されるため、完全ではありません。

すべてを比較検討しているのですが、考えられるすべてのシナリオを説明する単一の1行ソリューションがあるかどうかはわかりません。jQueryコードがマークアップと一致していることを確認する必要があります。

行がない場合でも、マークアップにtable少なくとも1つtbodyは常に含めるようにするのがおそらく最も安全な解決策だと思います。これに基づいて、次のものを使用できます。これは、持っている行の数に関係なく機能します（複数のtbody要素も考慮に入れます）。

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
— ルーク・ベネット
ソース
6
@ラーマ、いいえ、それはしません。より良い解決策が必要です。
— ブライアンリャン
40
DOMには常にtbodyがあります。
— まぶたがない2009年
4
ただし、空のtbodyはHTMLを検証しません
— 2ni
40
他の点では優れたソリューションのマイナーな改善は、セレクターを最適化することです。次の方法で速度を改善できます：の$('#myTable').find('tbody:last')代わりに$('#myTable > tbody:last')。
— ErikTöyräSilfverswärd12
2
「まぶたのないことは、DOMには常にtbodyが存在するという良いコメントをしています」-私はtbodyなしでこれを試してみましたが、機能しませんでした-tbodyがある場合にのみ機能します。
— BrainSlugs83 2013
771

jQueryには、DOM要素をその場で操作するための組み込み機能があります。

次のようにテーブルに何でも追加できます。

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

$('<some-tag>')jQueryの中のものは、いくつか持つことができますタグオブジェクトでattr設定および取得できる属性と同様に、textここでのタグの間のテキストを表し、：<tag>text</tag>。

これはかなり奇妙なインデントですが、この例では何が起こっているのかを簡単に確認できます。

— ニール
ソース
60
これを試している人のために、括弧の位置に注意してください。適切な入れ子は重要です。
— Ryan Lundy
9
終了タグはど​​うですか？それらは必要ありませんか？
— senfo
9
ハッシュ記号はクラス名ではなくIDを参照するので、$（ "＃tableClassname"）は実際には$（ "＃tableID"）であってはなりませんか？
— デイブ
7
私はそのような奇妙な連鎖が嫌いです。そのようなものでいっぱいのコードを維持することは悪夢です。
— バンサー2013
4
@senfo が子要素を追加すると、それらが自動的に作成されます。
— Michel de Ruiter 2013
308

@Luke Bennettがこの質問に答えたので、事は変わりました。これが更新です。

あなたは（のいずれかの使用して挿入しようとしている要素場合は、バージョン1.4（？）以来のjQueryを自動的に検出しappend()、prepend()、before()、またはafter()メソッド）がある<tr>と、最初に挿入し、それを<tbody>あなたのテーブルまたは新しいにそれをラップ<tbody>1がない場合存在します。

だから、はい、あなたのサンプルコードは許容可能であり、jQuery 1.4+で正常に動作します。;）

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
— サルマン・フォン・アッバス
ソース
2
この仮定に注意してください。追加したマークアップが\ nまたは\ n \ rで始まる場合、jQueryはそれが<tr>であることを検出せず、<tbody>ではなく<table>に追加します。最初に追加の行があったMVCビューによって生成されたマークアップでこれに遭遇しました。
— Mik 2016年
@Mik頭を上げてくれてありがとう！yourString.trim()これは改善できると思います。
— Salman von Abbas
もちろん、あなたはそれについて考えなければなりません。<tbody>が存在することがわかっている場合は、それに追加する習慣をつけてください。
— Mik 2016年
jQuery 3.1では、tbodyを指定する必要があります。ここをチェックしてください：jsfiddle.net/umaj5zz9/2
— user984003 '20
これにより、ページが更新されます。どうすればそれを防ぐことができますか？
— Avi 2018
168

とがあったらどう<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>");
— ChadT
ソース
10
tfootを正しく実装していません。後ではなくtbodyの前に置く必要があります。w3.org/TR/html4/struct/tables.html # h - 11.2.3を参照してください。したがって、あなたが標準を破ることを選択しない限り、私の解決策はまだ機能します（その場合、他のものがうまくいかないことが予想されます）。私の解決策は、tbodyがあるかどうかに関係なく機能しますが、tbodyが存在しない場合、提案は失敗します。
— ルークベネット
6
<tfoot />の間違いにもかかわらず、これはより良い解決策です。<tbody />がない場合は、<table />自体にも同じ手法を使用できます。一方、「受け入れられた回答」では、既存の行があるかどうかを確認するために追加のチェックが必要です。（私はOPがこの要件を指定していないことを知っていますが、それは問題ではありません-この投稿がこの手法のGoogle検索で最初に表示され、最良の答えはトップではありません。）
— CleverPatrick 2009
5
これは、見つけるよりも優れたソリューションです。いくつかの反復で、この手法は常に機能するように見えます。追加の参考情報として、.prependを使用して行をテーブルの先頭に追加できますが、.appendは行をテーブルの末尾に配置します。
— ランスクリーブランド
これは不正解です
— 。tbodyの
@ garg10mayどのようにアドバイスできますか？子要素ではなく、tbodyをターゲットにしています。
— ChadT 2017年
64

jQueryメソッドを要求したことは知っています。私はたくさん調べましたが、次の関数でJavaScriptを直接使用するよりも良い方法でそれを実行できることがわかりました。

tableObject.insertRow(index)

index挿入する行の位置を指定する整数（0から開始）。-1の値も使用できます。その結果、新しい行が最後の位置に挿入されます。

このパラメーターはFirefoxおよびOperaでは必須ですが、Internet Explorer、Chrome、およびSafariではオプションです。。

このパラメーターを省略した場合insertRow()、Internet Explorerの最後の位置とChromeおよびSafariの最初の位置に新しい行を挿入します。

HTMLテーブルのすべての許容可能な構造で機能します。

次の例では、最後に行を挿入します（-1はインデックスとして使用されます）。

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

お役に立てば幸いです。

— シャシュワット
ソース
2
この方法の問題（ちょうど見つけたように）は、フッターがある場合、フッターの後に-1をインデックスとして追加することです。
— kdubs
35

私はお勧め

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

とは対照的に 

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

firstそしてlast開始される最初または最後のタグにキーワード作業は、閉じられていません。したがって、ネストされたテーブルを変更したくないが、代わりにテーブル全体に追加したい場合は、ネストされたテーブルを使用する方が適しています。少なくとも、これは私が見つけたものです。

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>
— Curtor
ソース
32

私の意見では、最も速くて明確な方法は

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

ここでデモ フィドルです

また、HTMLを変更する小さな関数をお勧めします

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

私の文字列作曲家を使用している場合は、次のようにすることができます

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

ここではデモです フィドルは、

— 優しい
ソース
複数あるtbody場合は、複数のインサートを入手できます
— Mark Schultheiss
はい、できます:)あなたは$("SELECTOR").last()タグのコレクションを制限することを試みることができます
— 18.
23

これは、jQueryの「last（）」関数を使用して簡単に行うことができます。

$("#tableId").last().append("<tr><td>New row</td></tr>");
— ニシャル
ソース
9
良い考えですが、今はセレクターを#tableId trに変更する必要があると思います。テーブルを取得すると、テーブルの下に行が追加されます。
— ダリル・ハイン
17

テーブルに行がない場合や、各行が非常に複雑な場合に、この方法を使用しています。

style.css：

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...
— ドミニク
ソース
ありがとうございました。これは非常にエレガントなソリューションです。テンプレートをグリッド内に保持する方法が気に入っています。これにより、コードが非常にシンプルになり、読みやすく、保守しやすくなります。再度、感謝します。
— Rodney
14

ここに掲載されている最善の解決策として、最後の行にネストされたテーブルがある場合、新しい行はメインテーブルではなくネストされたテーブルに追加されます。簡単な解決策（tbodyがあるテーブルとないテーブル、およびネストされたテーブルがあるテーブルを検討）：

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

使用例：

add_new_row('#myTable','<tr><td>my new row</td></tr>');
— オシュア
ソース
14

この方法で解決しました。

jqueryの使用

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

スニペット

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>
スニペットを展開

— アントンvBR
ソース
？私は成功した今、新しい行に動的データを追加することができますが、この方法を使用した後、私のカスタムフィルタは、あなたはそのためのすべてのソリューションを持っている..Doが動作していないTはあなたのハンク
— アルジュン
なんらかの更新関数を呼び出す必要があると思います。例なしで伝える必要があります。
— アントンvBR
13

クリックされた行の後にテーブル行を挿入しようとして、いくつかの関連する問題がありました。.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);
— Avron Olshewsky
ソース
これは既存の質問に対する答えではなく、新しい質問になると思います...
— ダリルハイン
11

このすばらしいjQuery add table row関数を使用できます。それは持っているテーブルでうまく機能します<tbody>うまく機能します。また、最後のテーブル行のcolspanも考慮に入れます。

次に使用例を示します。

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
— ウズベクジョン
ソース
それがひどく役に立っているのがわかりません。空のテーブル行をテーブルに追加するだけです。通常、常にではないにせよ、データを含む新しいテーブル行を追加する必要があります。
— ダリルハイン
1
しかし、それは通常あなたが望んでいることです。この関数を使用すると、列と行の数に関係なく、空の行をテーブルに追加できるため、UNIVERSAL関数になります。そこから、たとえば$（ '。tbl tr：last td'）を実行できます。全体のポイントは、ユニバーサル機能を持​​つことです!!!
— ウズベクジョン2009年
関数がデータを新しい行に追加した場合、次回のプロジェクトでそのデータを使用できなくなります。ポイントは？！それは私の意見ですが、あなたはそれを共有する必要はありません...
— ウズベクホン2009年
共通パッケージに含まれていない関数を提案する場合は、ここに完全な関数コードを入力してください。ありがとうございました。
— Yevgeniy Afanasyev 2015
10

私の解決策：

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

使用法：

$('#Table').addNewRow(id1);
— リッキーG
ソース
tbodyテーブルにない場合はどうなりますか？<table>ヘッダーがない場合でも、要素内に直接行がある可能性があることを意味します
— shashwat
<TBody>を使用してマークアップを作成し、HTML 5標準に準拠することを強くお勧めします。そうでない場合は、いつでも$（this）.append（ '<tr id = "' + rowId + '"> </を実行できます。 tr> '）; テーブルに行を追加するだけです。
— リッキーG
これを関数にする場合は、新しい行のjQueryオブジェクトを返してチェーン可能にすることができます。
— カオス
10 
    // 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);
— パンカイ・ガルグ
ソース
これは答えかもしれませんが、後でビジターにあまり役に立ちません...あなたの答えの周りにいくつかの説明を加えてください。
— Jayan
9

ニールの答えは断然最高です。しかし、物事は本当に速く混乱します。私の提案は、要素を格納してDOM階層に追加するために変数を使用することです。

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

ジャバスクリプト

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
— ガブリエル大城
ソース
9 
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

JavaScript関数で書く

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
— ジャキル・ホセイン
ソース
7

これがハッケチハックコードです。HTMLページで行テンプレートを維持したいと思っていました。テーブルの行0 ... nはリクエスト時にレンダリングされ、この例にはハードコードされた1つの行と簡略化されたテンプレート行があります。テンプレートテーブルは非表示になっており、行タグは有効なテーブル内にある必要があります。そうしないと、ブラウザがそれをDOMツリーからドロップする可能性があります。行を追加すると、counter + 1識別子が使用され、現在の値はdata属性に保持されます。各行が一意のURLを取得することを保証しますパラメータをます。

Internet Explorer 8、Internet Explorer 9、Firefox、Chrome、Opera、Nokia Lumia 800、Nokia C7（Symbian 3）、Androidストック、Firefoxベータブラウザーでテストを実行しました。

<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プログラミング-その悪夢について考えたくありません。

— Whome
ソース
7

私は自分のプロジェクトで私がやったと思います、ここにあります：

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');
    });
      });
});
— SNEH PANDYA
ソース
7

別の変数がある場合は、<td>そのようなタグでアクセスできます。

このように私はそれが役に立てば幸いです

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);
— MEAbid
ソース
6

最後に行を追加する方法も特定の場所もあるので、これも共有する必要があると思います。

まず、長さまたは行を見つけます。

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

次に、以下のコードを使用して行を追加します。

$("#table_id").eq(r-1).after(row_html);
— Jaid07
ソース
6

トピックの良い例を追加するために、特定の位置に行を追加する必要がある場合の解決策を次に示します。

追加の行は、5行目以降、または5行未満の場合はテーブルの最後に追加されます。

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

私はコンテンツをテーブルの下の準備ができた（非表示の）コンテナーに配置します。したがって、ユーザー（またはデザイナー）が変更する必要がある場合、JSを編集する必要はありません。

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>
— d.raev
ソース
6 
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

フッター変数をキャッシュしてDOMへのアクセスを減らすことができます（注：フッターの代わりに偽の行を使用する方がよい場合があります）。

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
— パベル・シュクレイニク
ソース
5 
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

テーブルの最初 TBODYの行に新しい行を追加します。何THEADもTFOOT存在しないかは関係ありません。（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>

ここで例えばa b行が後に挿入され1 2ていない後に、3 4第二の例です。テーブルが空の場合、jQueryはTBODY新しい行を作成します。

— アレクセイパブロフ
ソース
5

Datatable JQueryプラグインを使用している場合は、試すことができます。

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

データテーブルを参照fnAddData Datatables API

— プラビーナM
ソース
5

簡単な方法で：

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
— vipul sorathiya
ソース
提供するソリューションについてもう少し説明を追加して、回答を詳しく説明していただけませんか？
— abarisone 2015年
4

これを試してください：非常に簡単な方法

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>
スニペットを展開

— rajmobiapp
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.