javascript - 중간에 - jquery 테이블 열 추가



jQuery에서 테이블 행 추가하기 (20)

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

이게 받아 들여질 수 있니?

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

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


Answer #1

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


Answer #2

hacketi 해킹 코드가 있습니다. 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없이 자바 스크립트 프로그래밍 - 나는 심지어 악몽에 대해 생각하고 싶지 않다.


Answer #3

jQuery에는 즉시 DOM 요소를 조작 할 수있는 기능이 내장되어 있습니다.

다음과 같이 테이블에 아무 것도 추가 할 수 있습니다.

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

jQuery의 $('<some-tag>') 는 설정 될 수있는 여러 attr 속성과 태그 사이의 텍스트를 나타내는 text 가질 수있는 태그 객체입니다. <tag>text</tag> .

이것은 꽤 이상한 들여 쓰기이지만,이 예제에서 어떤 일이 벌어지고 있는지 쉽게 볼 수 있습니다.


Answer #4

간단한 방법으로 :

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

Answer #5

나는 내 프로젝트에서 그랬다. 여기있다.

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

Answer #6

나는 또한 내가 마지막으로 또는 특정 장소에서 행을 추가 할 수있는 방법을 가지고 있으므로 나는 또한 이것을 공유해야한다고 생각한다 :

먼저 길이 또는 행을 찾습니다.

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

행을 추가하려면 아래 코드를 사용하십시오.

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

Answer #7

내 솔루션 :

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

용법:

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

Answer #8

다른 변수가 있으면 <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);

Answer #9

여기에 게시 된 최상의 솔루션의 경우 마지막 행에 중첩 테이블이 있으면 기본 테이블 대신 중첩 테이블에 새 행이 추가됩니다. 빠른 솔루션 (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>');

Answer #10

AddRow 플러그인 이 테이블 행 관리에 매우 유용하다는 것을 알았습니다. 하지만 새로운 행을 추가하기 만하면 Luke의 solution 이 가장 적합 할 것입니다.


Answer #11

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

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

Answer #12

이것이 나의 해결책이다.

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

Answer #13

주제에 대한 좋은 예를 추가하려면 특정 위치에 행을 추가해야하는 경우 작동하는 솔루션이 있습니다.

추가 행은 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>

Answer #14

클릭 한 행 다음에 표 행을 삽입하려고하면 관련 문제가 발생했습니다. .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);

Answer #15

<tbody><tfoot> 있다면 어떨까요?

예를 들면 :

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

그러면 새 행이 바닥 글에 삽입됩니다.

따라서 최상의 솔루션은 <tbody> 태그를 포함하고 .append 가 아닌 .append 사용하는 것입니다.

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

Answer #16

<tr> 첫 번째 자식 앞에 row 을 추가하려는 경우.

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

<tr> 마지막 자식 다음에 row 을 추가하려는 경우.

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

Answer #17

Neil의 대답 은 지금까지 최고의 것입니다. 그러나 일이 정말 지저분 해집니다. 내 제안은 변수를 사용하여 요소를 저장하고 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);

Answer #18
    // 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);

Answer #19
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

자바 스크립트 함수로 작성

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

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

꼬리말 변수를 캐싱하고 DOM에 대한 액세스를 줄일 수 있습니다 (참고 : 꼬리말 대신 가짜 행을 사용하는 것이 더 좋을 수도 있습니다).

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




html-table