Làm cách nào để thêm các hàng ở giữa một bảng với jQuery?

Question

Tôi có một bảng có tên khách hàng cùng với các sản phẩm họ đã mua với giá của họ. Vì vậy, có nhiều bản ghi cho mỗi khách hàng. Bảng này là bảng 3 cột đơn giản: tên, sản phẩm và giá cả.

Những gì tôi muốn làm là:

Đặt tất cả hồ sơ thuộc một khách hàng với nhau (tôi đã thực hiện nó) và chỉ sau khi các hàng bổ sung thêm một hàng mới trong đó sẽ chỉ hiển thị giá tổng cộng của tất cả các sản phẩm mỗi khách hàng đã mua. Hàng này sẽ có ô trống trong tên và cột sản phẩm. Và sẽ có tổng giá trong cột.

EDIT

Nó chỉ là một bảng đơn giản đơn giản mà không cần bất kỳ lớp hoặc id. Bảng nhóm khách hàng khôn ngoan được tạo bởi php. Vì vậy, tôi đã là một bảng như thế này

<table> 
    <tr> 
     <td> name1 </td> 
     <td> product1 </td> 
     <td> 100 </td> 
    </tr> 
    <tr> 
     <td> name1 </td> 
     <td> product2 </td> 
     <td> 200 </td> 
    </tr> 
    <tr> 
     <td> name2 </td> 
     <td> product3 </td> 
     <td> 50 </td> 
    </tr> 
    <tr> 
     <td> name2 </td> 
     <td> product1 </td> 
     <td> 100 </td> 
    </tr> 
</table> 

Và tôi muốn chuyển đổi này để:

<table> 
    <tr> 
     <td> name1 </td> 
     <td> product1 </td> 
     <td> 100 </td> 
    </tr> 
    <tr> 
     <td> name1 </td> 
     <td> product2 </td> 
     <td> 200 </td> 
    </tr> 
    <!-- New row --> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td> 300 </td> 
    </tr> 
    <tr> 
     <td> name2 </td> 
     <td> product3 </td> 
     <td> 50 </td> 
    </tr> 
    <tr> 
     <td> name2 </td> 
     <td> product1 </td> 
     <td> 100 </td> 
    </tr> 
    <!-- New row --> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td> 150 </td> 
    </tr> 
</table> 

Answer 1

Sử dụng jQuery, bạn có thể chọn tất cả các hàng nơi tên người dùng được chứa trong một trong các phần tử con cháu của nó. Tôi giả sử tên người dùng là duy nhất.

$("tr:contains('" + username + "')") 

Bây giờ, có cuối cùng một

$("tr:contains('" + username + "')").last() 

Và sử dụng after chức năng để chèn hàng mới của bạn.

Answer 2

var prize = 1 * 1; 
    var newrow = $('<tr><td></td><td></td><td>' + prize + '</td></tr>'); 
    $('#rowid').after(newrow); 

hoặc

newrow.insertAfter('#rowid'); 

nơi #rowid là một id từ một dòng bạn muốn nối thêm một dòng mới.