jQuery에 테이블 행 추가
-
05-07-2019 - |
문제
테이블에 추가 행을 마지막 행으로 추가하는 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>');
당신은 내에 무엇이든 포함 할 수 있습니다 after()
위의 예에 따라 여러 행을 포함하여 유효한 HTML 인 한 방법.
업데이트: 이 질문으로 최근 활동에 이어이 답변을 다시 방문합니다. 눈이없는 것은 항상 tbody
돔에서; 이것은 사실이지만 적어도 하나의 행이있는 경우에만 가능합니다. 줄이 없다면 tbody
직접 지정하지 않는 한.
DARKON_ 제안 에 추가 tbody
마지막 후에 콘텐츠를 추가하는 대신 tr
. 이것은 행이없는 문제를 해결하지만 이론적으로 여러 가지 가질 수있는 것처럼 방탄이 아닙니다. tbody
요소와 행은 각각에 추가됩니다.
모든 것을 평가하면 가능한 모든 단일 시나리오를 설명하는 단일 라인 솔루션이 있는지 잘 모르겠습니다. jQuery 코드가 마크 업으로 키가 큰지 확인해야합니다.
가장 안전한 해결책은 아마도 당신의 table
항상 하나 이상을 포함합니다 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')
)
)
);
그만큼 $('<some-tag>')
jQuery의 물건은 여러 가지를 가질 수있는 태그 개체입니다. attr
설정하고 얻을 수있는 속성뿐만 아니라 text
, 여기에서 태그 사이의 텍스트를 나타냅니다. <tag>text</tag>
.
이것은 꽤 이상한 들여 쓰기이지만이 예에서 무슨 일이 일어나고 있는지 알기가 더 쉽습니다.
그래서 그 이후로 상황이 바뀌 었습니다 @Luke Bennett 이 질문에 대답했습니다. 다음은 업데이트입니다.
jQuery 버전 1.4 (?) 이후 삽입하려는 요소가 자동으로 감지합니다 ( append()
, prepend()
, before()
, 또는 after()
방법)은 a입니다 <tr>
첫 번째에 삽입합니다 <tbody>
당신의 테이블에서 또는 그것을 새로운 것으로 감싸십시오 <tbody>
존재하지 않는 경우.
예, 예제 코드는 허용되며 jQuery 1.4+에서 잘 작동합니다. ;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
만약 당신이 있다면 <tbody>
그리고 a <tfoot>
?
와 같은:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
그런 다음 바닥 글에 새 행을 삽입합니다.
따라서 최상의 솔루션은 a를 포함하는 것입니다 <tbody>
태그와 사용 .append
,보다는 .after
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
나는 당신이 jQuery 메소드를 요청했다는 것을 알고 있습니다.나는 많은 것을 보았고 다음 함수를 통해 JavaScript를 직접 사용하는 것보다 더 나은 방법으로 이를 수행할 수 있다는 것을 알았습니다.
tableObject.insertRow(index)
index
삽입할 행의 위치를 지정하는 정수입니다(0부터 시작).-1 값을 사용할 수도 있습니다.결과적으로 새 행이 마지막 위치에 삽입됩니다.
이 매개변수는 Firefox 및 오페라, 그러나 Internet Explorer에서는 선택 사항입니다. 크롬 그리고 원정 여행.
이 매개변수를 생략하면 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>');
여기 데모가 있습니다 깡깡이
또한 더 많은 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'
}));
여기 데모가 있습니다깡깡이
이것은 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>
당신은 이것을 잘 사용할 수 있습니다 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);
닐의 대답 지금까지 최고의 것입니다. 그러나 상황이 정말로 빨리 지어집니다. 내 제안은 변수를 사용하여 요소를 저장하고 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);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
JavaScript 기능으로 작성하십시오
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
나는 이것을 찾았다 Addrow 플러그인 테이블 행을 관리하는 데 매우 유용합니다. 그래도 루크 해결책 새 행을 추가 해야하는 경우 가장 적합합니다.
다음은 해킹 해킹 코드입니다. 나는 행 템플릿을 유지하고 싶었다 HTML 페이지. 테이블 행 0 ... n은 요청 시간에 렌더링 되며이 예제에는 하나의 하드 코드 행과 단순화 된 템플릿 행이 있습니다. 템플릿 테이블이 숨겨져 있으며 행 태그는 유효한 테이블 내에 있어야합니다. 그렇지 않으면 브라우저가 돔 나무. 행을 추가하면 Counter+1 식별자가 사용되며 현재 값은 데이터 속성에 유지됩니다. 각 행이 독특 해지도록 보장합니다 URL 매개 변수.
Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera,에서 테스트를 실행했습니다. 노키아 루미아 800, 노키아 C7 (와 함께 증상 3), 안드로이드 스톡 및 파이어 폭스 베타 브라우저.
<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 프로그래밍 - 나는 그 악몽에 대해 생각하고 싶지도 않습니다.
<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>
어떤 예에서 a b
행이 삽입됩니다 1 2
, 후에 3 4
두 번째 예에서. 테이블이 비어 있으면 jQuery가 생성됩니다 TBODY
새 행을 위해.
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>");
추가하려면 row
후 <tr>
막내.
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");