jQueryでテーブル行を追加する
https://stackoverflow.com/questions/171027
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
テーブルに最後の行として追加の行を追加するjQueryの最良の方法は何ですか？
これは受け入れられますか
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
このようなテーブルに追加できるもの（入力、選択、行数など）に制限はありますか？
解決
提案するアプローチは、探している結果が得られるとは限りません。たとえば、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>');
上記の例のように複数の行を含む、有効なHTMLであれば、after()メソッド内に何でも含めることができます。
更新：この質問の最近のアクティビティに続いてこの回答を再検討します。まぶたのないことは、DOMに常にtrが存在するという良いコメントです。これは本当ですが、少なくとも1つの行がある場合のみです。行がない場合、自分で行を指定しない限りtableはありません。
DaRKoN_ 提案の後にコンテンツを追加するのではなく、<=>に追加する最後の<=>。これは行がないという問題を回避しますが、理論的には複数の<=>要素があり、それぞれに行が追加される可能性があるため、それでも防弾ではありません。
すべてを比較検討すると、考えられるすべてのシナリオを説明する単一の1行ソリューションがあるかどうかはわかりません。 jQueryコードがマークアップと一致することを確認する必要があります。
おそらく最も安全な解決策は、行がない場合でも<=>に常に少なくとも1つの<=>をマークアップに含めることだと思います。これに基づいて、以下を使用できますが、これは多くの行を処理します（また、複数の<=>要素を考慮します）：
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
他のヒント
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>。<を持つことができるタグオブジェクトです。 / p>
これはかなり奇妙なインデントですが、この例で何が起こっているかを見るのは簡単です。
@Luke Bennett がこの質問に回答して以来、状況は変化しています。ここにアップデートがあります。
jQueryバージョン1.4（？）以降は、挿入しようとしている要素が < => 、 append() 、 prepend() 、または before() メソッド）はafter()で、テーブルの最初の<tr>に挿入するか、存在しない場合は新しい<tbody>にラップします。
そうです、あなたのサンプルコードは受け入れられ、jQuery 1.4+で問題なく動作します。 ;）
$('#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>
次に、本文ではなくフッターに新しい行を挿入します。
したがって、最良の解決策は、.appendタグを含め、.afterではなく<=>を使用することです。
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
jQueryメソッドを要求したことがわかります。私はよく見て、次の関数でJavaScriptを直接使用するよりも良い方法でそれができることを見つけました。
tableObject.insertRow(index)
indexは、挿入する行の位置を指定する整数です（0から始まります）。 -1の値も使用できます。その結果、新しい行が最後の位置に挿入されます。
このパラメーターはFirefoxおよび Opera では必須ですが、オプションですInternet Explorerでは、 Chrome および Safari 。
このパラメーターを省略した場合、insertRow()はInternet <！> nbsp; 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>
お役に立てば幸いです。
推奨
$('#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>
私の意見では、最速かつ明確な方法は
//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'
}));
デモはこちら フィドル
これは、<！> quot; last（）<！> quot;を使用して簡単に実行できます。 jQueryの関数。
$("#tableId").last().append("<tr><td>New row</td></tr>");
表に行がなく、各行が非常に複雑な場合にこの方法を使用しています。
style.css：
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
ここに投稿された最適なソリューションでは、最後の行にネストされたテーブルがある場合、メインテーブルではなくネストされたテーブルに新しい行が追加されます。簡単な解決策（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>');
クリックした行の後に表の行を挿入しようとして、関連する問題がいくつかありました。 .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>
etc ...
次に：
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
この方法で解決しました。
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>
この素晴らしい jQueryを使用できますテーブル行を追加関数。 <tbody>があるテーブルとないテーブルでうまく機能します。また、最後のテーブル行のcolspanも考慮に入れます。
使用例は次のとおりです。
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
私の解決策：
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
使用法：
$('#Table').addNewRow(id1);
// 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);
Neilの回答は圧倒的に最高です。しかし、物事は本当に速くなります。私の提案は、変数を使用して要素を保存し、それらをDOM階層に追加することです。
HTML
<table id="tableID">
<tbody>
</tbody>
</table>
JAVASCRIPT
// 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);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
javascript関数を使用して記述する
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
この AddRowプラグインは、テーブル行の管理に非常に役立つことがわかりました。ただし、新しい行を追加する必要がある場合は、ルークのソリューションが最適です。
これはhacketiハックコードです。 HTML ページで行テンプレートを維持したかった。テーブル行0 ... nは要求時にレンダリングされ、この例には1つのハードコーディングされた行と単純化されたテンプレート行があります。テンプレートテーブルは非表示であり、行タグは有効なテーブル内にある必要があります。そうでない場合、ブラウザは DOM ツリー。行の追加にはcounter + 1識別子が使用され、現在の値はデータ属性で維持されます。各行が一意の URL パラメーターを取得することを保証します。
インターネットでテストを実行しました<！> nbsp; Explorer <！> nbsp; 8、Internet <！> nbsp; Explorer <！> nbsp; 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プログラミング-その悪夢について考えたくはありません。
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
自分のプロジェクトで行ったことがあると思います。ここにあります：
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');
});
});
});
これは私の解決策です
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
最後に行を追加する方法や特定の場所があるので、これも共有する必要があると思います：
最初に長さまたは行を見つけます：
var r=$("#content_table").length;
次に以下のコードを使用して行を追加します：
$("#table_id").eq(r-1).after(row_html);
トピックに良い例を追加するために、特定の位置に行を追加する必要がある場合の有効なソリューションを次に示します。
追加の行は、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>
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
フッター変数をキャッシュして、DOMへのアクセスを減らすことができます（注：フッターの代わりに偽の行を使用した方が良いかもしれません）。
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
別の変数がある場合は、そのような<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);
$('#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>
この例では、2番目の例のa bの後ではなく、1 2の後に3 4行が挿入されます。テーブルが空の場合、jQueryは新しい行に対して<=>を作成します。
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);
Datatables fnAddDataを参照 Datatables API
簡単な方法：
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
最初の子rowの前に<tr>を追加する場合。
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
<=>最後の子の後に<=>を追加する場合。
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
