JQueryにテーブル行を追加する
最後の行としてテーブルに行を追加するための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には常にtbodyがあることになるという良いコメントをしています。これは事実ですが、少なくとも1つの行がある場合に限ります。行がない場合は、自分で行を指定しない限り、tbodyはありません。
DaRKoN_ 最後のtbodyの後にコンテンツを追加するのではなく、trに追加することを提案します。これは行を持たないという問題を回避しますが、理論的には複数のtbody要素を持つことができ、それぞれの行に行が追加されるため、まだ安全ではありません。
すべてを検討すると、考えられるすべてのシナリオに対応できる単一の1行ソリューションがあるかどうかはわかりません。あなたはjQueryコードがあなたのマークアップと一致することを確認する必要があるでしょう。
最も安全な解決策はおそらく、行がない場合でも、あなたのtableが常にあなたのマークアップに少なくとも1つのtbodyを含むようにすることであると思います。これに基づいて、あなたはあなたが持っているけれども（そしてまた複数のtbody要素を考慮に入れる）しかしうまくいくであろう以下を使うことができます：
$('#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>。
これはかなり奇妙なインデントですが、この例で何が起こっているかを見るのは簡単です。
そのため、 @Luke Bennett がこの質問に回答して以来、状況は変わっています。これがアップデートです。
バージョン1.4以降のjQuery（？）では、挿入しようとしている要素が append() 、 prepend() 、 before() 、または のいずれかを使用して自動的に検出されます。 after() methods）は<tr>であり、テーブルの最初の<tbody>に挿入するか、存在しない場合は新しい<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>
それからそれはあなたの新しい行をフッターに挿入するでしょう - 本体にではありません。
したがって、最善の解決策は、<tbody>ではなく.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 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>');
ここにデモがありますFiddle
また、私はより多くの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'
}));
これはデモFiddleです。
これはjQueryの "last（）"関数を使って簡単に行うことができます。
$("#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>
など.
その後 ：
$('#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>私の解決策：
//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);
この素晴らしい jQuery add table row 関数を使うことができます。それは<tbody>を持っていて、持っていないテーブルで素晴らしい働きをします。また、最後のテーブル行の列を考慮に入れます。
使用例は次のとおりです。
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
ニールの答え ははるかに最高のものです。しかし、物事は非常に早く乱雑になります。私の提案は、要素を格納してそれらを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);
AddRowプラグインを見つけました テーブルの行を管理するのにとても便利です。とはいえ、Lukeの solution は、新しい行を追加するだけの場合に最適です。
これがいくつかのhacketiハックコードです。 _ html _ ページに行テンプレートを維持したいと思いました。テーブル行0 ... nは要求時にレンダリングされます。この例では、1つのハードコードされた行と単純化されたテンプレート行があります。テンプレートテーブルは非表示になっており、行タグは有効なテーブル内にある必要があります。そうしないと、ブラウザによって _ dom _ ツリーから削除される可能性があります。行を追加すると、counter + 1識別子が使用され、現在の値はdata属性で維持されます。各行が一意の _ url _ パラメータになることを保証します。
Internet Explorer 8、Internet Explorer 9、Firefox、Chrome、Opera、 Nokia Lumia 800 、 Nokia C7 （with 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();
}
シモンズ：私はすべてのクレジットを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');
});
});
});
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
JavaScript関数で書く
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</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>")
私はまた私もこれを共有する必要があると思うので最後に行または任意の特定の場所に行を追加する方法を持っているので：
まず長さや行を調べます。
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>
別の変数がある場合は、<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);
簡単な方法で：
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
存在するTBODYまたはTHEADに依存せずに、テーブルのfirstTFOOTに新しい行を追加します。 （この動作が存在する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は新しい行のTBODYを作成します。
これが私の解決策です
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
あなたが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
最初の子の<tr>の前にrowを追加する場合。
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
最後の子の<tr>の後にrowを追加する場合。
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
JQueryを使用してtabe行を追加します。
行テーブルの行の子の最後の後を追加したい場合は、これを試すことができます
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
row テーブルの行の子の1番目を追加したい場合は、これを試すことができます。
$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
上記の答えは非常に役立ちますが、学生がフォームからデータを追加するためにこのリンクを参照するとき、彼らはしばしばサンプルを必要とします。
私はからの入力を取得し、文字列interpolationを使用してテーブルにtrを挿入するために.after()を使用するサンプルを提供したいと思います。
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick="add()" value="Add new" />
</form>
<table id='student'>
<thead>
<th>Name</th>
<th>Mark</th>
</thead>
</table>
</body>
</html>これを試してください：とても簡単な方法
$('<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>これはまたすることができます：
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
ヒント： innerHTML or .html()を介したhtml tableへの行の挿入は一部のブラウザでは無効であり（IE9と同様）、.append("<tr></tr>")を使用することはどのブラウザでもお勧めできません。 best と 最速 の方法はpure javascriptコードを使うことです。
このようにjQueryと組み合わせるには、jQueryに似た新しいプラグインのみを追加します。
$.fn.addRow=function(index/*-1: add to end or any desired index*/, cellsCount/*optional*/){
if(this[0].tagName.toLowerCase()!="table") return null;
var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
return $(r);
};
そして今、これと同様にプロジェクト全体でそれを使用します。
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);