복붙노트

[JQUERY] jQuery를 테이블 행 추가

JQUERY

jQuery를 테이블 행 추가

해결법

  1. 1.당신이 제안하는 접근 방식은 당신이 찾고있는 당신에게 결과를 제공하기 위해 보장 할 수 없습니다 - 당신은 예를 들어 TBODY 있었다 어떤 경우 :

    당신이 제안하는 접근 방식은 당신이 찾고있는 당신에게 결과를 제공하기 위해 보장 할 수 없습니다 - 당신은 예를 들어 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,의로 후 () 메소드 내에서 아무것도 포함 할 수 있습니다.

    업데이트 :이 질문 최근 활동 다음은이 답을 다시 방문. eyelidlessness는 항상 DOM에 TBODY이 될 것 좋은 코멘트를 만드는; 이 사실이지만, 경우에만 적어도 하나 개의 행이 있습니다. 당신이 행이없는 경우 하나를 직접 지정하지 않는 한, 더 TBODY가 없을 것입니다.

    DaRKoN_ 오히려 마지막 그럴 후 내용을 추가하는 것보다 TBODY에 추가하는 것이 좋습니다. 이 행이없는 문제를 주변에 도착,하지만 여전히 당신은 이론적으로 여러 TBODY 요소를 가질 수 있고 행이 그들 각각에 추가됩니다 것처럼 방탄 없습니다.

    모든 것을 무게, 나는하지 않도록 모든 단일 가능한 시나리오를 차지하고 단일 한 줄 해결책이 있어요. 당신은 당신의 마크 업 확인 jQuery 코드의 탈리를 확인해야합니다.

    내가 가장 안전한 솔루션이 더 행이없는 경우에도, 테이블은 항상 마크 업에서 적어도 하나의 TBODY를 포함하기 위해 아마 생각합니다. 이를 바탕으로, 당신은 당신이 (그리고 여러 TBODY 요소를 설명) 그러나 많은 행을 작동합니다 다음을 사용할 수 있습니다 :

    $('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

  2. 2.jQuery를이 내장 된 시설 즉석에서 DOM 요소를 조작 할 수있다.

    jQuery를이 내장 된 시설 즉석에서 DOM 요소를 조작 할 수있다.

    이 같은 테이블에 아무것도 추가 할 수 있습니다 :

    $("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

    $ ( '<일부-태그>') jQuery를에있는 것은 여기에 태그 사이의 텍스트 나타내는 여러 ATTR를 설정하고 얻을 수있는 속성뿐만 아니라 텍스트가 할 수있는 태그 객체입니다 : <태그> 텍스트를 < / 태그>.

    이것은 꽤 이상한 들여 쓰기이지만,이 예제에서 무슨 일이 일어나고 있는지 볼 수 있도록 쉽다.

  3. 3.그래서 일이 @Luke 베넷이 질문에 대답 이후로 변경되었습니다. 여기에 업데이 트입니다.

    그래서 일이 @Luke 베넷이 질문에 대답 이후로 변경되었습니다. 여기에 업데이 트입니다.

    jQuery를 사용하면 (또는 방법) (후) (전, ()는 APPEND의 앞에 추가 ()를 하나를 사용)를 삽입하려고하는 요소는 과에 삽입을 것입니다 버전 1.4 (?)을 자동으로 감지하기 때문에 경우 첫 번째 테이블 또는으로 래핑 새로운 하나 존재하지 않는 경우.

    그래서 그래 당신의 예제 코드는 허용 및 jQuery를 1.4 이상으로 잘 작동합니다. ;)

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

  4. 4.당신은 과 가 있다면?

    당신은 과 가 있다면?

    예를 들면 :

    <table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

    그런 다음 바닥 글에 새 행을 삽입합니다 -하지 몸에.

    따라서, 최적의 솔루션은 태그를 포함 오히려 후론보다으로 .Append 사용하는 것이다.

    $("#myTable > tbody").append("<tr><td>row content</td></tr>");

  5. 5.난 당신이 jQuery를 방법을 요구 한 것을 알고있다. 나는 많이 보았다 우리는 다음과 같은 기능에 의해 직접 자바 스크립트를 사용하는 것보다 더 나은 방법으로 그것을 할 수있는 찾을 수 있습니다.

    난 당신이 jQuery를 방법을 요구 한 것을 알고있다. 나는 많이 보았다 우리는 다음과 같은 기능에 의해 직접 자바 스크립트를 사용하는 것보다 더 나은 방법으로 그것을 할 수있는 찾을 수 있습니다.

    tableObject.insertRow(index)

    인덱스 (0에서 시작한다)를 삽입하는 행의 위치를 ​​지정하는 정수이다. -1의 값이 또한 사용될 수있다; 새로운 행이 최종 위치에 삽입되는 것을되는 결과.

    이 매개 변수는 파이어 폭스와 오페라에 필요하지만 인터넷 익스플로러, 크롬과 사파리에서 선택 사항입니다.

    이 매개 변수를 생략하면, InsertRow를 ()는 Internet Explorer에서 마지막 위치에와 크롬과 사파리의 첫 번째 위치에 새 행을 삽입합니다.

    그것은 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>

    나는 그것이 도움이되기를 바랍니다.

  6. 6.나는 추천

    나는 추천

    $('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');

    반대로

    $('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

    첫 번째 또는 마지막 태그의 첫 번째와 마지막 키워드 작품은 폐쇄하지 시작합니다. 당신이 중첩 된 테이블을 변경하지 않으려면 따라서,이 연극은, 중첩 된 테이블 좋네요, 대신 전체 테이블에 추가 할 수 있습니다. 적어도,이 내가 찾은 것입니다.

    <table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

  7. 7.내 의견으로는 가장 빠르고 명확한 방법입니다

    내 의견으로는 가장 빠르고 명확한 방법입니다

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

    여기 데모입니다 깡깡이

  8. 8.이것은 쉽게 jQuery를의 "마지막 ()"기능을 사용하여 수행 할 수 있습니다.

    이것은 쉽게 jQuery를의 "마지막 ()"기능을 사용하여 수행 할 수 있습니다.

    $("#tableId").last().append("<tr><td>New row</td></tr>");

  9. 9.뿐만 아니라, 각 행은 상당히 복잡로, 테이블의 모든 행이 없을 때이 방법을 사용하고 있습니다.

    뿐만 아니라, 각 행은 상당히 복잡로, 테이블의 모든 행이 없을 때이 방법을 사용하고 있습니다.

    있는 style.css :

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

    xxx.html

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

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

...

  10. 10.최고의 솔루션을 위해 중첩 된 테이블의 마지막 행에있을 경우, 새로운 행이 중첩 테이블 대신 기본 테이블에 추가됩니다, 여기에 게시. (TBODY없이 /로 테이블과 중첩 테이블이있는 테이블을 고려) 빠른 솔루션 :

    최고의 솔루션을 위해 중첩 된 테이블의 마지막 행에있을 경우, 새로운 행이 중첩 테이블 대신 기본 테이블에 추가됩니다, 여기에 게시. (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>');

  11. 11.나는 이런 식으로 해결했다.

    나는 이런 식으로 해결했다.

    jQuery를 사용하여

    $('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

    $ ( '# 탭'). APPEND ($ ( '') 으로 .Append ($ ( ''). APPEND ( "텍스트 1")) 으로 .Append ($ ( ''). APPEND ( "텍스트 2")) 으로 .Append ($ ( ''). APPEND ( "텍스트 3")) 으로 .Append ($ ( ''). APPEND ( "텍스트 4")) ) <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <테이블 ID = "탭"> <제> FIRSTNAME <제> 성 <제> 연령 <일> 도시 질 스미스 50 뉴욕

  12. 12.나는 클릭 된 행 다음 테이블 행을 삽입하려고 몇 가지 관련 문제가되었다. 모두가 마지막 행에 대해 작동하지 않습니다 후론 () 호출을 제외하고 괜찮습니다.

    나는 클릭 된 행 다음 테이블 행을 삽입하려고 몇 가지 관련 문제가되었다. 모두가 마지막 행에 대해 작동하지 않습니다 후론 () 호출을 제외하고 괜찮습니다.

    $('#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);

  13. 13.당신은이 위대한의 jQuery 추가 테이블 행 기능을 사용할 수 있습니다. 그것은하지 않습니다 이 있고 테이블과 잘 작동합니다. 또한 그것은 고려 마지막 테이블 행의 열 병합됩니다.

    당신은이 위대한의 jQuery 추가 테이블 행 기능을 사용할 수 있습니다. 그것은하지 않습니다 이 있고 테이블과 잘 작동합니다. 또한 그것은 고려 마지막 테이블 행의 열 병합됩니다.

    다음은 사용 예는 다음과 같습니다

    // One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

  14. 14.내 솔루션 :

    내 솔루션 :

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

    용법:

    $('#Table').addNewRow(id1);

  15. 15.

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

  16. 16.닐의 대답은 지금까지 최고의 하나입니다. 그러나 일이 정말 빨리 더러워를 얻을. 나의 제안은 저장 요소에 변수를 사용하여 DOM 계층 구조로 추가하는 것입니다.

    닐의 대답은 지금까지 최고의 하나입니다. 그러나 일이 정말 빨리 더러워를 얻을. 나의 제안은 저장 요소에 변수를 사용하여 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);

  17. 17.

    <table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

    자바 스크립트 기능을 쓰기

    document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

  18. 18.나는이 AddRow 테이블 행을 관리하기위한 매우 유용한 플러그인 발견했다. 방금 새 행을 추가해야하는 경우 비록, 누가 복음의 솔루션이 가장 적합 할 것이다.

    나는이 AddRow 테이블 행을 관리하기위한 매우 유용한 플러그인 발견했다. 방금 새 행을 추가해야하는 경우 비록, 누가 복음의 솔루션이 가장 적합 할 것이다.

  19. 19.여기에 몇 가지 hacketi 해킹 코드입니다. 나는 HTML 페이지의 행 템플릿을 유지하고 싶었다. 표 행 0 ... N 요청시에 렌더링되며,이 예에서는 하나의 하드 행 간략화 템플릿 행을 갖는다. 템플릿 테이블은 숨겨져하고, 행 태그는 DOM 트리에서 드롭 할 수있다 유효한 테이블 또는 브라우저 내에 있어야합니다. 행 추가 카운터 + 1 식별자를 사용하여, 전류 값은 데이터 속성에 유지된다. 그것은 각 행은 고유 한 URL 매개 변수를 가져옵니다 보장합니다.

    여기에 몇 가지 hacketi 해킹 코드입니다. 나는 HTML 페이지의 행 템플릿을 유지하고 싶었다. 표 행 0 ... N 요청시에 렌더링되며,이 예에서는 하나의 하드 행 간략화 템플릿 행을 갖는다. 템플릿 테이블은 숨겨져하고, 행 태그는 DOM 트리에서 드롭 할 수있다 유효한 테이블 또는 브라우저 내에 있어야합니다. 행 추가 카운터 + 1 식별자를 사용하여, 전류 값은 데이터 속성에 유지된다. 그것은 각 행은 고유 한 URL 매개 변수를 가져옵니다 보장합니다.

    나는 인터넷 익스플로러 8, 인터넷 익스플로러 9, 파이어 폭스, 크롬, 오페라에 노키아 루미아 800 (심비안 3) 노키아 C7, 안드로이드 주식과 파이어 폭스 베타 브라우저 테스트를 실행했다.

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

    PS : 나는 jQuery를 팀에 대한 모든 크레딧을 제공; 그들은 모든 것을 가치가있다. 자바 스크립트는 jQuery를하지 않고 프로그래밍 - 나는 심지어 그 악몽에 대해 생각하고 싶지 않아요.

  20. 20.

    <tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

  21. 21.나는 여기있다, 난 내 프로젝트에서 수행 한 추측 :

    나는 여기있다, 난 내 프로젝트에서 수행 한 추측 :

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

  22. 22.이것은 내 솔루션입니다

    이것은 내 솔루션입니다

    $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

  23. 23.다른 변수가있을 경우 해당 시도와 같은 태그에 액세스 할 수 있습니다.

    다른 변수가있을 경우 해당 시도와 같은 태그에 액세스 할 수 있습니다.

    나는 그것이 도움이 될 것입니다 희망이 방법

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

  24. 24.나는 또한 내가이 공유해야한다고 생각 때문에 마지막 또는 특정 장소에 행을 추가 너무하는 방법을 가지고 다음과 같음 :

    나는 또한 내가이 공유해야한다고 생각 때문에 마지막 또는 특정 장소에 행을 추가 너무하는 방법을 가지고 다음과 같음 :

    먼저 길이 또는 행을 찾을 수 :

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

    다음 행을 추가하는 코드 아래 사용

    $("#table_id").eq(r-1).after(row_html);

  25. 25.특정 위치에 행을 추가해야하는 경우 여기에 솔루션을 작동하고, 주제에 대한 좋은 예제를 추가합니다.

    특정 위치에 행을 추가해야하는 경우 여기에 솔루션을 작동하고, 주제에 대한 좋은 예제를 추가합니다.

    미만 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에 필요하지 않은 변경해야 할 경우 ..so 아래 표를 준비 (숨겨진) 용기에 내용을 넣습니다.

    <table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

  26. 26.

    <table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

    당신은 바닥 글 변수를 캐시 및 DOM에 액세스 줄일 수 있습니다 (참고 : 대신 바닥 글의 가짜 행을 사용하는 것이 더 좋을 것입니다 수 있습니다).

    var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

  27. 27.

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

    어떤 THEAD 또는 TFOOT 존재 의존하지 않고, 테이블의 제 TBODY에 새로운 행을 추가한다. (난의 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>

    어떤 예에서, B 행은하지 후 3 4 번째 예에서, 1 (2) 후에 삽입된다. 테이블이 비어 있다면, jQuery를 새로운 행에 대해 TBODY을 만듭니다.

  28. 28.당신이 플러그인 데이터 테이블 jQuery를 사용하는 경우 당신은 시도 할 수 있습니다.

    당신이 플러그인 데이터 테이블 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를 참조하십시오

  29. 29.간단한 방법으로 :

    간단한 방법으로 :

    $('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

  30. 30.아주 간단한 방법이 시도

    아주 간단한 방법이 시도

    $ ( ' 3 4 ') appendTo ( "# myTable에 TBODY."); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> <테이블 ID = "myTable에"> 1 2

    31. from https://stackoverflow.com/questions/171027/add-table-row-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 아약스 포스트에서 핸들 파일 다운로드  (0) 2020.09.22
[JQUERY] 요소에 텍스트를 선택 (마우스로 강조 유사)  (0) 2020.09.22
[JQUERY] jQuery를 / 자바 스크립트가 깨진 이미지를 교체  (0) 2020.09.22
[JQUERY] 어떻게 자바 스크립트를 사용하여 이미지 크기 (높이 및 폭)을 얻으려면?  (0) 2020.09.22
[JQUERY] 어떻게 숫자 (0-9)에서 HTML에서 InputBox jQuery를 사용하는 경우에만 허용하는?  (0) 2020.09.22
,

티스토리툴바