jQuery에서 마지막 행으로 테이블에 추가 행을 추가하는 가장 좋은 방법은 무엇입니까?
이것이 허용됩니까?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');이와 같이 테이블에 추가할 수 있는 항목(예: 입력, 선택, 행 수)에 제한이 있습니까?
반응형
질문자 :Darryl Hein
제안한 접근 방식은 원하는 결과를 보장하지 않습니다. 예를 들어 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 가 있을 것이라는 좋은 의견을 제시합니다. 이것은 사실이지만 적어도 하나의 행이 있는 경우에만 가능합니다. 행이 없으면 직접 지정하지 않는 한 tbody
DaRKoN_ tr 다음에 내용을 추가하는 대신 tbody 추가하는 것을 제안 합니다. 이것은 행이 없는 문제를 해결하지만 이론적으로 여러 tbody 요소를 가질 수 있고 행이 각각에 추가될 수 있으므로 여전히 방탄이 아닙니다.
모든 것을 고려해 볼 때 가능한 모든 단일 시나리오를 설명하는 단 하나의 솔루션이 있는지 확신할 수 없습니다. jQuery 코드가 마크업과 일치하는지 확인해야 합니다.
가장 안전한 솔루션은 행이 없더라도 table 마크업에 항상 최소한 하나의 tbody 이를 기반으로 다음을 사용할 수 있습니다. 이 작업은 행이 아무리 tbody 작동합니다(또한 여러 tbody 요소를 고려함).
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');Luke Bennett
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> .
이것은 꽤 이상한 들여쓰기이지만 이 예에서 무슨 일이 일어나고 있는지 보는 것이 더 쉽습니다.
Neil
@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>');Salman von Abbas
<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
나는 당신이 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>도움이 되기를 바랍니다.
shashwat
나는 추천한다
$('#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
내 생각에 가장 빠르고 명확한 방법은
//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' }));여기 데모 바이올린이 있습니다
sulest
이것은 jQuery의 "last()" 함수를 사용하여 쉽게 수행할 수 있습니다.
$("#tableId").last().append("<tr><td>New row</td></tr>");Nischal
테이블에 행이 없을 때 뿐만 아니라 각 행이 매우 복잡할 때 이 방법을 사용합니다.
스타일.css:
... #templateRow { display:none; } ...xxx.html
... <tr id="templateRow"> ... </tr> ... $("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() ); ...Dominic
저는 이 방법으로 해결했습니다.
제이쿼리 사용
$('#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>Anton vBR
여기에 게시된 최상의 솔루션을 위해 마지막 행에 중첩 테이블이 있는 경우 기본 테이블 대신 중첩 테이블에 새 행이 추가됩니다. 빠른 솔루션(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>');Oshua
클릭한 행 다음에 테이블 행을 삽입하려고 하는 등 몇 가지 관련 문제가 있었습니다. .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
// 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);Pankaj Garg
이 훌륭한 jQuery 테이블 행 추가 기능을 사용할 수 있습니다. <tbody> 있고 없는 테이블에서 잘 작동합니다. 또한 마지막 테이블 행의 colspan을 고려합니다.
다음은 사용 예입니다.
// One table addTableRow($('#myTable')); // add table row to number of tables addTableRow($('.myTables'));Uzbekjon
내 솔루션:
//Adds a new table row $.fn.addNewRow = function (rowId) { $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>'); };용법:
$('#Table').addNewRow(id1);Ricky G
Neil의 대답 은 단연 최고입니다. 그러나 상황이 정말 빨리 지저분해집니다. 내 제안은 변수를 사용하여 요소를 저장하고 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);GabrielOshiro
<table id="myTable"> <tbody> <tr>...</tr> <tr>...</tr> </tbody> <tr>...</tr> </table>자바스크립트 함수로 작성
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';Jakir Hossain
이 AddRow 플러그인 이 테이블 행을 관리하는 데 매우 유용하다는 것을 알았습니다. 그러나 새 행을 추가하기만 하면 Luke의 솔루션이 가장 적합합니다.
Vitalii Fedorenko
이것이 나의 해결책이다
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');Daniel Ortegón
다음은 hacketi 해킹 코드입니다. HTML 페이지에서 행 템플릿을 유지하고 싶었습니다. 테이블 행 0...n은 요청 시 렌더링되며 이 예에는 하나의 하드코딩된 행과 단순화된 템플릿 행이 있습니다. 템플릿 테이블은 숨겨져 있으며 행 태그는 유효한 테이블 내에 있어야 하며 그렇지 않으면 브라우저가 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(); }추신: 모든 크레딧을 jQuery 팀에 제공합니다. 그들은 모든 것을 받을 자격이 있습니다. jQuery를 사용하지 않는 JavaScript 프로그래밍 - 나는 그 악몽에 대해 생각하고 싶지도 않습니다.
Whome
<tr id="tablerow"></tr> $('#tablerow').append('<tr>...</tr><tr>...</tr>');Vivek S
나는 내 프로젝트에서 한 것 같아요. 여기 있습니다 :
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
다른 변수가 있으면 <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
나는 또한 마지막에 행을 추가하거나 특정 장소에 너무 많은 방법을 가지고 있으므로 이것을 공유해야 한다고 생각합니다.
먼저 길이 또는 행을 찾으십시오.
var r=$("#content_table").length;그런 다음 아래 코드를 사용하여 행을 추가하십시오.
$("#table_id").eq(r-1).after(row_html);Jaid07
주제에 대한 좋은 예를 추가하기 위해 특정 위치에 행을 추가해야 하는 경우 작동하는 솔루션이 있습니다.
추가 행은 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
<table id=myTable> <tr><td></td></tr> <style="height=0px;" tfoot></tfoot> </table>바닥글 변수를 캐시하고 DOM에 대한 액세스를 줄일 수 있습니다(참고: 바닥글 대신 가짜 행을 사용하는 것이 더 나을 수 있음).
var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>")Pavel Shkleinik
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 존재 THEAD 또는 TFOOT 의존하지 않고 테이블 의 첫 번째 TBODY 에 새 행을 추가합니다. (이 동작이 존재하는 .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> 어떤 예에서 ab 행은 두 번째 예에서 3 4 뒤에 삽입되지 않고 1 2 테이블이 비어 있으면 jQuery는 새 행에 대해 TBODY
Alexey Pavlov
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 참조
Praveena M
간단한 방법으로:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');vipul sorathiya
이것을 시도하십시오 : 매우 간단한 방법
$('<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
출처 : http:www.stackoverflow.com/questions/171027/add-table-row-in-jquery
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| PHP에서 mysql_* 함수를 사용하면 안 되는 이유는 무엇입니까? (0) | 2021.11.23 |
|---|---|
| ssh "권한이 너무 열려 있습니다"오류 (0) | 2021.11.23 |
| 두 지점의 차이점을 어떻게 알 수 있습니까? (0) | 2021.11.23 |
| (a== 1 && a ==2 && a==3) 참으로 평가될 수 있습니까? (0) | 2021.11.23 |
| 훌륭한 R 재현 가능한 예제를 만드는 방법 (0) | 2021.11.23 |