Câu hỏi Thêm hàng của bảng trong jQuery


Phương pháp tốt nhất trong jQuery để thêm một hàng bổ sung vào một bảng là hàng cuối cùng là gì?

điều này có chấp nhận được không?

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

Có những hạn chế đối với những gì bạn có thể thêm vào một bảng như thế này (chẳng hạn như đầu vào, lựa chọn, số hàng) không?


2057
2017-10-04 21:33


gốc


Thxs Ash. Tôi cũng chỉ học jQuery và thấy khó để tìm ra cách tốt nhất, đặc biệt là những điều đơn giản. Lý do họ là 2 câu hỏi là bởi vì tôi đã đăng một và sau đó gần một giờ sau đó tôi nhận ra tôi nên đã đặt một trong những khác và không nghĩ rằng tôi nên thay đổi đầu tiên. - Darryl Hein
Bởi vì điều này: google.com/search?q=jquery+add+table+row - Darryl Hein
FYI - Tránh sử dụng nhiều phụ thêm (làm chậm hiệu suất cực kỳ), thay vì xây dựng chuỗi của bạn hoặc sử dụng JavaScript tham gia nhanh hơn nhiều. - Gerrit Brink
xem: stackoverflow.com/a/50365764/7186739 - Super Model
Chỉ trong trường hợp nếu hàng quá phức tạp, điều tôi làm là giữ hàng đầu tiên ẩn với cấu trúc bắt buộc, tạo bản sao và sửa đổi văn bản và chèn sau hàng đầu tiên, theo cách này nếu bạn tìm nạp dữ liệu từ phản hồi ajax bảng của bạn sẽ được tạo, hãy nhớ sao chép nó bên ngoài vòng lặp, sau đó sử dụng nó để sửa đổi nội dung bên trong vòng lặp. $ ("# mainTable tbody"). chắp thêm (hàng); hàng là bản sao sửa đổi bản sao :) - Aadam


Các câu trả lời:


Cách tiếp cận bạn đề xuất không được đảm bảo để cung cấp cho bạn kết quả bạn đang tìm kiếm - nếu bạn có tbody ví dụ:

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

Bạn sẽ kết thúc với những điều sau đây:

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

Do đó, tôi sẽ đề xuất phương pháp này thay thế:

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

Bạn có thể bao gồm mọi thứ trong after() phương pháp miễn là HTML hợp lệ, bao gồm nhiều hàng theo ví dụ trên.

Cập nhật: Xem lại câu trả lời này sau hoạt động gần đây với câu hỏi này. mí mắt làm cho một bình luận tốt rằng sẽ luôn có một tbody trong DOM; điều này đúng, nhưng chỉ khi có ít nhất một hàng. Nếu bạn không có hàng, sẽ không có tbody trừ khi bạn đã chỉ định một mình.

DaRKoN_ gợi ý phụ thêm vào tbody thay vì thêm nội dung sau lần cuối tr. Điều này xung quanh vấn đề không có hàng, nhưng vẫn không chống đạn vì bạn có thể có nhiều lý thuyết tbody các yếu tố và hàng sẽ được thêm vào mỗi phần tử.

Cân nhắc tất cả mọi thứ, tôi không chắc chắn có một giải pháp một dòng cho mỗi kịch bản có thể. Bạn sẽ cần phải đảm bảo mã jQuery cao với đánh dấu của bạn.

Tôi nghĩ rằng giải pháp an toàn nhất có lẽ là để đảm bảo table luôn bao gồm ít nhất một tbody trong đánh dấu của bạn, ngay cả khi nó không có hàng. Trên cơ sở này, bạn có thể sử dụng những điều sau đây sẽ làm việc tuy nhiên nhiều hàng bạn có (và cũng có tài khoản cho nhiều tbody yếu tố):

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

1872
2017-10-04 21:49



Điều này có hiệu quả nếu không có hàng trong bảng? - Rama Vadakattu
@ Rama, không có nó sẽ không. Cần phải có một giải pháp tốt hơn. - Brian Liang
Sẽ luôn có một người trong DOM. - eyelidlessness
một tbody trống không xác thực html của bạn mặc dù - 2ni
Một cải tiến nhỏ cho giải pháp tốt đẹp khác là tối ưu hóa các bộ chọn. Bạn có thể nhận được cải thiện tốc độ với: $('#myTable').find('tbody:last') thay vì $('#myTable > tbody:last'). - Erik Töyrä


jQuery có một cơ sở tích hợp để thao tác các phần tử DOM một cách nhanh chóng.

Bạn có thể thêm bất cứ thứ gì vào bảng của bạn như thế này:

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

Các $('<some-tag>') điều trong jQuery là một đối tượng thẻ có thể có một số attr các thuộc tính có thể được đặt và nhận, cũng như text, đại diện cho văn bản giữa thẻ ở đây: <tag>text</tag>.

Đây là một số indenting khá lạ, nhưng nó dễ dàng hơn cho bạn để xem những gì đang xảy ra trong ví dụ này.


699
2017-08-14 15:30



Đối với những người đang cố gắng này, lưu ý cẩn thận các vị trí của dấu ngoặc đơn. Việc lồng đúng cách là rất quan trọng. - Ryan Lundy
Điều gì về các thẻ đóng? Họ có cần thiết không? - senfo
Không nên $ ("# tableClassname") thực sự là $ ("# tableID") vì biểu tượng băm đề cập đến ID và không phải là tên lớp? - Dave
nếu tôi muốn thêm nhiều hơn một <td>, nó sẽ đi đâu? Cảm ơn! - sammiwei
Tôi ghét chuỗi kỳ lạ như vậy. Đó là một cơn ác mộng để duy trì mã đầy những thứ như vậy. - bancer


Vì vậy, mọi thứ đã thay đổi kể từ đó @Luke Bennett đã trả lời câu hỏi này. Đây là bản cập nhật.

jQuery kể từ phiên bản 1.4 (?) tự động phát hiện nếu phần tử bạn đang cố gắng chèn (sử dụng bất kỳ phần tử nào trong số append(), prepend(), before(), hoặc là after() phương pháp) là <tr> và chèn nó vào đầu tiên <tbody> trong bảng của bạn hoặc kết thúc nó thành một <tbody> nếu không tồn tại.

Vì vậy, có mã ví dụ của bạn là chấp nhận được và sẽ làm việc tốt với jQuery 1.4+. ;)

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

276
2018-06-05 20:12



Hãy cẩn thận với giả định này. Nếu đánh dấu nối thêm của bạn bắt đầu bằng \ n hoặc \ n \ r, jQuery sẽ không phát hiện ra nó là một <tr> và sẽ thêm nó vào <table> và không phải <tbody>. Tôi chỉ gặp phải điều này với đánh dấu được tạo ra bởi một chế độ xem MVC có thêm một dòng ở đầu. - Mik
@Mik cảm ơn những người đứng đầu! tôi đoán yourString.trim() có thể khắc phục điều này. - Salman Abbas
Tất nhiên, nhưng bạn phải suy nghĩ về nó. Tốt hơn nên có thói quen phụ thêm vào <tbody> nếu bạn biết có một. - Mik
jQuery 3.1 vẫn yêu cầu một tbody được chỉ định. Kiểm tra nó ra ở đây: jsfiddle.net/umaj5zz9/2 - user984003
Điều này làm cho trang của tôi làm mới. Làm thế nào tôi có thể ngăn chặn điều đó? - Avi


Nếu bạn có <tbody> và một <tfoot>?

Nhu la:

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

Sau đó, nó sẽ chèn hàng mới của bạn trong chân trang - không phải cho cơ thể.

Do đó giải pháp tốt nhất là bao gồm <tbody> tag và sử dụng .append, thay vì .after.

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

147
2018-01-22 06:47



Bạn đã thực hiện không đúng cách. Nó sẽ đến trước mặt người, không phải sau - thấy w3.org/TR/html4/struct/tables.html#h-11.2.3. Do đó giải pháp của tôi vẫn hoạt động trừ khi bạn chọn phá vỡ các tiêu chuẩn (trong trường hợp này bạn có thể mong đợi những thứ khác cũng bị sai). Giải pháp của tôi cũng hoạt động cho dù bạn có một tbody hay không, trong khi đề xuất của bạn sẽ thất bại nếu một tbody không có mặt. - Luke Bennett
Mặc dù có bất kỳ sai lầm nào trong <tfoot />, đây là một giải pháp tốt hơn. Nếu không có <tbody /> bạn có thể sử dụng cùng một kỹ thuật trên <table />. Trong khi "câu trả lời được chấp nhận" yêu cầu kiểm tra bổ sung để xem có hay không có hàng hiện tại. (Tôi biết OP không chỉ định yêu cầu này, nhưng nó không quan trọng - bài đăng này đứng thứ nhất trên một tìm kiếm của Google cho kỹ thuật này, và câu trả lời hay nhất không phải là hàng đầu.) - Clever Human
Đây là một giải pháp tốt hơn là tìm. Trong một số lần lặp lại, kỹ thuật này dường như luôn hoạt động. Là một FYI bổ sung, bạn có thể sử dụng .prepend để thêm hàng vào đầu bảng trong khi .append đặt hàng ở cuối bảng. - Lance Cleveland
Điều này là không chính xác, nó sẽ thêm hàng vào mỗi hàng trong tbody - garg10may
@ garg10may Bạn có thể tư vấn như thế nào không? Nó nhắm vào tbody, không phải bất kỳ phần tử con nào. - ChadT


Tôi biết bạn đã yêu cầu một phương thức jQuery. Tôi nhìn rất nhiều và thấy rằng chúng tôi có thể làm điều đó một cách tốt hơn so với sử dụng JavaScript trực tiếp bởi các chức năng sau đây.

tableObject.insertRow(index)

indexlà một số nguyên chỉ định vị trí của hàng cần chèn (bắt đầu từ 0). Giá trị của -1 cũng có thể được sử dụng; kết quả là hàng mới sẽ được chèn vào vị trí cuối cùng.

Tham số này là bắt buộc trong Firefox và Operanhưng nó là tùy chọn trong Internet Explorer, Chrome và Safari.

Nếu tham số này bị bỏ qua, insertRow() chèn một hàng mới ở vị trí cuối cùng trong Internet Explorer và ở vị trí đầu tiên trong Chrome và Safari.

Nó sẽ làm việc cho mọi cấu trúc của bảng HTML được chấp nhận.

Ví dụ sau sẽ chèn một hàng cuối cùng (-1 được sử dụng làm chỉ mục):

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

Tôi hy vọng nó sẽ giúp.


49
2018-04-20 17:38



vấn đề với phương pháp này (như tôi vừa phát hiện ra) là nếu bạn có một chân trang, nó sẽ thêm SAU phần chân trang với -1 làm chỉ mục. - kdubs


Tôi khuyên bạn nên

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

như trái ngược với

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

Các first và last từ khóa hoạt động trên thẻ đầu tiên hoặc thẻ cuối cùng sẽ được bắt đầu, không được đóng. Vì vậy, điều này chơi đẹp hơn với các bảng lồng nhau, nếu bạn không muốn bảng lồng nhau được thay đổi, nhưng thay vào đó thêm vào bảng tổng thể. Ít nhất, đây là những gì tôi tìm thấy.

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

31
2017-10-22 21:34





Theo tôi, cách nhanh nhất và rõ ràng nhất là

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

đây là bản demo Vĩ cầm

Ngoài ra tôi có thể đề xuất một chức năng nhỏ để thực hiện nhiều thay đổi hơn về 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] : '';
        });
    }
}());

Nếu bạn sử dụng nhà soạn nhạc chuỗi của tôi, bạn có thể làm điều này như

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

Đây là bản demo Vĩ cầm


26
2018-06-30 12:40





Điều này có thể được thực hiện dễ dàng bằng cách sử dụng hàm "last ()" của jQuery.

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

22
2018-01-26 13:34



Ý tưởng hay, nhưng tôi nghĩ bạn muốn thay đổi công cụ chọn thành #tableId tr ngay bây giờ bạn sẽ nhận được bảng thêm hàng bên dưới bảng. - Darryl Hein