jQuery에 테이블 행 추가

2425

jQuery에서 테이블에 마지막 행으로 추가 행을 추가하는 가장 좋은 방법은 무엇입니까?

이것이 허용됩니까?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

이와 같은 테이블에 추가 할 수있는 항목 (예 : 입력, 선택, 행 수)에 제한이 있습니까?

javascript  jquery  html-table 
— 대릴 하인
소스
2
Thxs Ash. 나도 jQuery를 배우고 가장 간단한 방법, 특히 가장 좋은 방법을 알아내는 것이 어렵다는 것을 알게되었습니다. 그들이 두 가지 질문으로 된 이유는 내가 하나를 게시 한 후 거의 1 시간 후에 다른 것을 넣었어야한다는 것을 깨달았고 첫 번째를 바꾸어야한다고 생각하지 않았기 때문입니다.
— Darryl Hein
30
— 대릴 하인
17
참고-여러 개의 추가 기능을 사용하지 마십시오 (성능이 크게 저하됨). 문자열을 늘리거나 훨씬 빠른 JavaScript 조인을 사용하십시오.
— Gerrit Brink
— Super Model
행이 너무 복잡한 경우, 내가하는 일은 필요한 구조로 첫 번째 행을 숨기고 복제하고 텍스트를 수정하고 첫 번째 행 다음에 삽입하는 것입니다. 이렇게하면 Ajax 응답에서 데이터를 가져 오는 경우 테이블이 생성됩니다. 루프 외부에서 복제 한 다음이를 사용하여 루프 내부의 컨텐츠를 수정하십시오. $ ( "# mainTable tbody"). append (row); 행은 수정 된 복제본입니다 :)
— Aadam

답변:

2143

당신이 제안하는 접근법은 당신이 찾고있는 결과를 제공한다고 보장하지는 않습니다 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 인 경우 메소드 내에 무엇이든 포함 할 수 있습니다 .

업데이트 : 이 질문에 대한 최근 활동에 따라이 답변을 다시 방문하십시오. 눈꺼풀은 tbodyDOM에 항상있을 것이라고 좋은 의견을 제시합니다 . 이것은 사실이지만 하나 이상의 행이있는 경우에만 해당됩니다. 행이 없으면 tbody직접 지정 하지 않은 한 없습니다 .

DaRKoN_ 은tbody 마지막 이후에 내용을 추가 하는 대신에 추가하는 것이 좋습니다 tr. 이것은 행이 없다는 문제를 해결하지만 이론적으로 여러 개를 가질 수 있으므로 방탄하지는 않습니다.tbody 요소를 있고 행이 각 요소에 추가되므로 .

모든 것을 고려할 때 가능한 모든 단일 시나리오를 설명하는 단일 한 줄 솔루션이 있는지 확실하지 않습니다. jQuery 코드가 마크 업과 일치하는지 확인해야합니다.

가장 안전한 해결책은 아마도 행이없는 경우에도 table항상 tbody마크 업에 하나 이상을 포함 시키는 것입니다. 이를 바탕으로 다음을 사용하면 많은 행을 사용할 수 있지만 여러 tbody요소를 고려할 수도 있습니다 .

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
— 루크 베넷
소스
6
@Rama, 안 그렇습니다. 더 나은 솔루션이 필요합니다.
— Brian Liang
40
DOM에는 항상 tbody가 있습니다.
— eyelidlessness
4
빈 tbody는 HTML을 확인하지 않습니다
— 2ni
40
그렇지 않으면 좋은 솔루션을 약간 개선하면 선택기를 최적화하는 것입니다. $('#myTable').find('tbody:last')대신 다음을 사용 하여 속도를 향상시킬 수 있습니다 $('#myTable > tbody:last').
— Erik Töyrä Silfverswärd
2
"눈꺼풀은 DOM에 항상 tbody가있을 것이라는 좋은 의견을 제시합니다."저는 tbody없이 이것을 시도했지만 작동하지 않았습니다. tbody가있는 경우에만 작동합니다.
— BrainSlugs83
771

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>.

이것은 약간 이상한 들여 쓰기이지만이 예제에서 무슨 일이 일어나고 있는지 쉽게 알 수 있습니다.

— 닐
소스
60
이것을 시도하는 사람들을 위해 괄호의 위치를주의 깊게 기록하십시오. 적절한 중첩이 중요합니다.
— Ryan Lundy
9
닫는 태그는 어떻습니까? 그들은 필요하지 않습니까?
— senfo 2016 년
9
해시 기호가 클래스 이름이 아닌 ID를 참조하므로 $ ( "# tableClassname")이 실제로 $ ( "# tableID")가 아니어야합니까?
— Dave
7
나는 그런 이상한 체인을 싫어한다. 그러한 것들로 가득 찬 코드를 유지하는 것은 악몽입니다.
— bancer
4
자식 요소를 추가하면 @senfo 가 자동으로 해당 요소를 만듭니다.
— Michel de Ruiter
308

@Luke Bennett 이후로 상황이 바뀌 었습니다. 이이 질문에 답변 . 다음은 업데이트입니다.

jQuery를 당신이 (의 어떤 사용하여 삽입하려는 요소 경우 버전 1.4 (?)를 자동으로 감지하기 때문에 append(), prepend(), before(), 또는 after()방법)가 있습니다 <tr>첫 번째로 및 삽입을 <tbody>테이블이나 새로 래핑 <tbody>한하지 않는 경우 있다.

그렇습니다. 예제 코드는 수용 가능하며 jQuery 1.4 이상에서 잘 작동합니다. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
— 살만 폰 압바스
소스
2
이 가정에주의하십시오. 추가 된 마크 업이 \ n 또는 \ n \ r로 시작하면 jQuery는 이것이 <tr>임을 감지하지 않고 <tbody>가 아닌 <table>에 추가합니다. 처음에 여분의 줄이있는 MVC보기로 생성 된 마크 업 으로이 문제가 발생했습니다.
— Mik
@Mik 감사합니다! 나는 yourString.trim()이것을 해결할 수 있다고 생각한다 .
— 살만 폰 압바스
물론, 당신은 그것에 대해 생각해야합니다. <tbody>가 있다면 아는 습관을들이는 것이 좋습니다.
— Mik
jQuery 3.1에서는 여전히 tbody를 지정해야합니다. 여기에서 확인하십시오 : jsfiddle.net/umaj5zz9/2
— user984003
이로 인해 내 페이지가 새로 고쳐집니다. 어떻게 방지 할 수 있습니까?
— Avi
168

만약에 a <tbody>와 a 가 있다면 <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>");
— 차드
소스
10
발을 잘못 구현했습니다. 뒤가 아니라 tbody 앞에 와야 합니다 ( w3.org/TR/html4/struct/tables.html#h-11.2.3 참조) . 따라서 표준을 위반하기로 선택하지 않는 한 내 솔루션은 여전히 ​​작동합니다 (이 경우 다른 일도 잘못 될 것으로 예상 할 수 있음). 내 솔루션은 tbody가 있든 없든 작동하지만 tbody가 없으면 제안이 실패합니다.
— Luke Bennett
6
<tfoot />의 실수에도 불구하고 이것은 더 나은 해결책입니다. <tbody />가없는 경우 <table /> 자체에서 동일한 기술을 사용할 수 있습니다. "허용 된 답변"에는 기존 행이 있는지 여부를 확인하기위한 추가 검사가 필요합니다. OP는이 요구 사항을 지정하지 않았지만 중요하지 않다는 것을 알고 있습니다.이 게시물은이 기술에 대한 Google 검색에서 1 위를 차지하며 가장 좋은 답변은 최고가 아닙니다.
— CleverPatrick
5
이것은 찾기보다 더 나은 솔루션입니다. 여러 반복에서이 기술은 항상 작동하는 것으로 보입니다. 추가 된 참고로 .prepend를 사용하여 테이블의 시작에 행을 추가 할 수 있지만 .append는 행을 테이블의 끝에 배치합니다.
— 랜스 클리블랜드
이것은이 TBODY의 모든 행에 행을 추가합니다, 잘못
— garg10may
어떻게 조언 해 줄 수 있습니까? 자식 요소가 아닌 tbody를 대상으로합니다.
— ChadT
64

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>

도움이 되길 바랍니다.

— 샤 와트
소스
2
이 방법의 문제는 (방금 알았 듯이) 바닥 글이 있으면 바닥 글 뒤에 -1을 색인으로 추가 한 후 바닥 글을 추가한다는 것입니다.
— kdubs
35

나는 추천한다

$('#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>
— 큐레이터
소스
32

제 생각에는 가장 빠르고 명확한 방법은

//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'
}));

데모 피들입니다

— 가장 설득력있는
소스
여러 개가있는 경우 tbody여러 개의 인서트를 얻을 수 있습니다
— Mark Schultheiss
그렇습니다 당신은 할 수 있습니다 :) 당신은 $("SELECTOR").last()당신의 태그 수집을 제한 하려고 할 수 있습니다
— 가장 무심한
23

이것은 jQuery의 "last ()"함수를 사용하여 쉽게 수행 할 수 있습니다.

$("#tableId").last().append("<tr><td>New row</td></tr>");
— 니샬
소스
9
좋은 생각이지만 선택기를 #tableId tr로 변경하고 싶다고 생각합니다. 지금 테이블에 테이블 아래에 행을 추가하십시오.
— Darryl Hein이
17

테이블에 행이 없을 때이 방법을 사용하고 있으며 각 행이 상당히 복잡합니다.

style.css :

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...
— 도미니크
소스
감사합니다. 이것은 매우 우아한 솔루션입니다. 템플릿을 그리드 내에 유지하는 방법이 마음에 듭니다. 코드를 훨씬 간단하고 읽기 쉽게 유지 관리 할 수 ​​있습니다. 다시 감사합니다.
— Rodney
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>');
— 오슈 아
소스
14

나는 이것을 이렇게 해결했다.

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>
스 니펫 확장

— 안톤 vBR
소스
이제 새 행에 동적 데이터를 성공적으로 추가 할 수 있지만이 방법을 사용한 후 사용자 정의 필터가 작동하지 않습니다. 해당 솔루션이 있습니까? T hank you
— Arjun
일종의 업데이트 기능을 호출해야한다고 생각합니다. 예없이 말할 수 없었습니다.
— Anton vBR
13

클릭 한 행 뒤에 테이블 행을 삽입하려고 시도하면서 관련 문제가 발생했습니다. 마지막 행에서 .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);
— 에이브 론 올슈 스키
소스
나는 ...이 기존에 대신 답변의 새로운 질문을해야한다고 생각
— 대릴 하인
11

이 훌륭한 jQuery 추가 테이블 행 함수를 사용할 수 있습니다 . 테이블이 <tbody>있고 그렇지 않은 테이블에서 잘 작동합니다 . 또한 마지막 테이블 행의 colspan을 고려합니다.

다음은 사용법 예입니다.

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
— 우즈벡 존
소스
나는 그것이 매우 유용하다는 것을 알 수 없습니다. 빈 테이블 행을 테이블에 추가하기 만하면됩니다. 항상 그렇지는 않지만 일반적으로 일부 데이터가 포함 된 새 테이블 행을 추가하려고합니다.
— Darryl Hein
1
그러나 그것은 일반적으로 당신이 원하는 것입니다. 이 함수를 사용하면 보유한 열과 행 범위에 관계없이 테이블에 빈 행을 추가 할 수 있으므로 UNIVERSAL 함수가됩니다. 예를 들어 $ ( '. tbl tr : last td')를 사용하여 계속 진행할 수 있습니다. 요점은 보편적 인 기능을하는 것입니다 !!!
— Uzbekjon
함수가 새 행에 데이터를 추가하면 다음에 다음 프로젝트에서 해당 데이터를 사용할 수 없습니다. 요점이 뭐야?! 그것은 내 의견으로는, 당신은 그것을 공유 할 필요가 없습니다 ...
— Uzbekjon
공통 패키지의 일부가 아닌 기능을 제안하는 경우 여기에 전체 기능 코드를 입력하십시오. 감사합니다.
— 예브게니 아파 나시 예프
10

내 해결책 :

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

용법:

$('#Table').addNewRow(id1);
— 리키 G
소스
그래서 tbody테이블에 없으면 어떻게 합니까 .. ?? <table>헤더가 없어도 요소 내부에 직접 행이있을 수 있음을 의미 합니다.
— shashwat
<TBody>를 사용하여 HTML 5 표준까지 마크 업하는 것이 좋습니다. 그렇지 않은 경우 언제든지 $ (this) .append ( '<tr id = "'+ rowId + '"> </ tr> '); 테이블에 행을 추가합니다.
— Ricky G
이 함수를 함수로 만들려면 새 행에 대해 jQuery 객체를 반환하여 체인 가능하게 할 수 있다고 생각합니다.
— 카오스
10 
    // 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);
— 판 카이 가그
소스
답변이 될 수도 있지만 나중에 방문자에게 도움이되지는 않습니다 ... 답변에 대한 설명을 추가하십시오.
— Jayan
9

닐의 대답 은 지금까지 최고입니다. 그러나 일이 정말 더러워집니다. 변수를 사용하여 요소를 저장하고 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);
— 가브리엘
소스
9 
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

자바 스크립트 함수로 작성

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
— 자 키르 호사 인
소스
7

다음은 일부 해커 티 해킹 코드입니다. HTML 페이지 에서 행 템플릿을 유지하고 싶었습니다 . 테이블 행 0 ... n은 요청시 렌더링되며이 예제에는 하나의 하드 코드 된 행과 단순화 된 템플리트 행이 있습니다. 템플릿 테이블이 숨겨져 있고 행 태그가 유효한 테이블 내에 있어야합니다. 그렇지 않으면 브라우저가 DOM 트리 에서이를 삭제할 수 있습니다 . 행을 추가하면 카운터 +1 식별자가 사용되며 현재 값은 데이터 속성에 유지됩니다. 각 행마다 고유 한 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>&nbsp;</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 프로그래밍-그 악몽에 대해 생각조차하고 싶지 않습니다.

— 우홈
소스
7 
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
— 비벡 S
소스
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');
    });
      });
});
— 스니 판다
소스
7

이것은 나의 해결책이다

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
— 다니엘 오 테곤
소스
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);
— MEAbid
소스
6

나는 또한 마지막이나 특정 장소에 행을 추가하는 방법을 얻었으므로 이것을 공유해야한다고 생각합니다.

먼저 길이 또는 행을 찾으십시오.

var r=$("#content_table").length;

그런 다음 아래 코드를 사용하여 행을 추가하십시오.

$("#table_id").eq(r-1).after(row_html);
— Jaid07
소스
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>
— 라브
소스
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>")
— 파벨 슈 클레 니크
소스
5 
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

또는 존재 하지 않고 테이블 의 첫 번째 TBODY 에 새 행을 추가합니다 . (나는 어떤 버전의 jQuery에서 정보를 찾지 못했습니다.THEADTFOOT.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는 새 행을 만듭니다 .

— 알렉세이 파블로프
소스
5

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);

데이터 테이블 참조 fnAddData 데이터 테이블 API

— 프라 베나 M
소스
5

간단한 방법으로 :

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
— Vipul Sorathiya
소스
제공하는 솔루션에 대한 설명을 조금 더 추가하여 답변을 더 자세히 설명해 주시겠습니까?
— abarisone 2016 년
4

이것을 시도하십시오 : 매우 간단한 방법

$('<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>
스 니펫 확장

— 람보 비
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.