[javascript] jQuery에 테이블 행 추가

Program / 글쓴이

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 인 경우 메소드 내에 무엇이든 포함 할 수 있습니다 .

업데이트 : 이 질문에 대한 최근 활동에 따라이 답변을 다시 방문하십시오. 눈꺼풀은 tbodyDOM에 항상있을 것이라고 좋은 의견을 제시합니다 . 이것은 사실이지만 하나 이상의 행이있는 경우에만 해당됩니다. 행이 없으면 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()방법)가 있습니다 <tr>첫 번째로 및 삽입을 <tbody>테이블이나 새로 래핑 <tbody>한하지 않는 경우 있다.

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

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

답변

만약에 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>");

답변

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

여기 데모 피들입니다

또한 더 많은 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'
}));

데모
피들입니다