jQueryで追加の行を最後の行としてテーブルに追加する最良の方法は何ですか?
これは受け入れられますか？
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
このようなテーブルに追加できるもの (入力、選択、行数など) に制限はありますか?
1883553 次
41 に答える
2261
あなたが提案するアプローチは、あなたが探している結果をあなたに与えることを保証するものではありません -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には常に が存在するという良いコメントになります。これは当てはまりますが、少なくとも 1 つの行がある場合に限られます。tbody行がない場合、自分で指定しない限り行はありません。
DaRKoN_は、最後の の後にコンテンツを追加するのではなく、 に追加することを提案しています。これは行がないという問題を回避しますが、理論的には複数の要素を持つことができ、それぞれに行が追加されるため、防弾ではありません。tbodytrtbody
すべてを比較検討すると、考えられるすべてのシナリオを説明する 1 行のソリューションがあるかどうかはわかりません。jQuery コードがマークアップと一致することを確認する必要があります。
最も安全な解決策は、行がなくても、table常にマークアップに少なくとも 1 つ含めることだと思います。tbodyこれに基づいて、次のように使用できますが、行数に関係なく機能します (また、複数のtbody要素を考慮します)。
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
于 2008-10-04T21:49:32.520 に答える
810
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>。
これはかなり奇妙なインデントですが、この例で何が起こっているかを簡単に確認できます。
于 2009-08-14T15:30:37.330 に答える
327
@Luke Bennettがこの質問に答えてから、状況は変わりました。ここにアップデートがあります。
バージョン 1.4(?) 以降の jQuery は、( append()、prepend()、before()、またはafter()メソッドのいずれかを使用して)挿入しようとしている要素が であるかどうかを自動的に検出<tr>し、それをテーブルの最初の要素に挿入するか、そうでない場合<tbody>は新しい要素にラップします。<tbody>存在。
はい、サンプルコードは受け入れられ、jQuery 1.4+で正常に動作します。;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
于 2012-06-05T20:12:48.013 に答える
178
もしあなたが<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>");
于 2009-01-22T06:47:03.307 に答える
79
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>
お役に立てば幸いです。
于 2012-04-20T17:38:43.803 に答える
38
私はお勧め
$('#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>
于 2010-10-22T21:34:25.710 に答える
36
私の意見では、最速かつ明確な方法は
//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'
}));
これがデモ フィドルです
于 2014-06-30T12:40:29.930 に答える
27
これは、jQueryの「last（）」関数を使用して簡単に実行できます。
$("#tableId").last().append("<tr><td>New row</td></tr>");
于 2010-01-26T13:34:15.150 に答える
18
テーブルに行がなく、各行が非常に複雑な場合に、この方法を使用しています。
スタイル.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
于 2010-12-16T05:30:14.513 に答える
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>');
于 2011-01-21T22:21:43.990 に答える
12
クリックされた行の後にテーブル行を挿入しようとして、いくつかの関連する問題が発生していました。.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);
于 2009-10-05T19:17:01.137 に答える
11
// 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);
于 2015-12-06T04:13:14.757 に答える
10
私の解決策：
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
利用方法：
$('#Table').addNewRow(id1);
于 2012-03-09T00:48:03.793 に答える
9
このAddRow プラグインは、テーブルの行を管理するのに非常に便利であることがわかりました。ただし、新しい行を追加するだけの場合は、Luke のソリューションが最適です。
于 2011-12-05T01:09:57.217 に答える
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> </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 プログラミング - その悪夢について考えたくもありません。
于 2013-03-28T21:51:47.210 に答える
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');
});
});
});
于 2014-01-31T06:13:58.103 に答える
7
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
于 2013-12-21T11:54:45.717 に答える
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);
于 2016-10-14T05:18:02.890 に答える
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>
于 2013-08-29T11:35:58.503 に答える
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>")
于 2012-04-13T10:47:12.497 に答える
5
簡単な方法で：
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
于 2015-06-16T12:11:44.080 に答える
5
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
anyまたはpresentに依存せずに、テーブルの最初 に新しい行を追加します。(この動作が存在するjQuery のバージョンに関する情報は見つかりませんでした。)TBODYTHEADTFOOT.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>
この例では、2 番目の例ではなく、 の後にa b行が挿入されます。テーブルが空の場合、jQuery は新しい行を作成します。1 23 4TBODY
于 2012-04-19T10:53:35.660 に答える
3
最初の子rowの前に追加する場合。<tr>
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
最後の子rowの後に追加する場合。<tr>
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
于 2017-03-16T09:07:45.600 に答える
1
私は最も支持されたものを試しましたが、うまくいきませんでしたが、以下ではうまくいきます。
$('#mytable tr').last().after('<tr><td></td></tr>');
そこにトビーがいても機能します。
于 2020-09-06T12:39:44.763 に答える