jQuery selector có điều kiện cho hàng bảng

Question

Tôi có một bảng với dữ liệu trong:

<td> item </td><td> order code </td><td> price </td>

Tôi đang xử lý bảng với jQuery mà cần phải tìm mã theo thứ tự:

$.each($('.productList tbody tr'), function() { 
    var orderCode = $(this).find('td:eq(1)').html().trim(); 
    // do stuff 
}); 

Nếu không có sản phẩm nào, bảng hiển thị thông báo:

<td colspan="3"> There are no products to display </td>

Hàng trên làm cho chức năng jQuery bị đánh bom. Cách mạnh nhất để sử dụng công cụ chọn có điều kiện để bỏ qua hàng "không có sản phẩm" là gì? Có bộ chọn cho colspan="1" hoặc colspan is not set hoặc bất kỳ công cụ nào cần phải chọn không?

Answer 1

Đừng trau chuốt chọn của bạn, nó sẽ không mở rộng quy mô cũng vì jQuery sẽ phải đánh giá tất cả các phần tử con. Thay vào đó, hãy tránh lỗi ...

$('.productList tbody tr').each(function() { 
    var orderCode = $(this).find('td:eq(1)'); 

    if(orderCode.length > 0) { // Make sure it exists 
    orderCode = orderCode.html().trim(); 
    // do stuff 
    } 
}); 

Answer 2

Như thế này:

$('.productList tbody tr:has(td:nth-child(2))').each(function() { 
    ... 
}); 

này sẽ chỉ chọn <tr> yếu tố mà có một <td> đó là đứa con thứ hai của mẹ. (Các nth-child selector là một-based)

Answer 3

Bạn có thể kiểm tra có bao nhiêu td s có:

$.each($('.productList tbody tr'), function() { 
    var tds = $(this).find('td'); 
    if(tds.length >= 2) { 
     var orderCode = tds.eq(1).html().trim(); 
     // do stuff 
    } 
}); 

Answer 4

Nếu bạn có thể thay đổi cách bạn tạo bảng, sử dụng các lớp học là một giải pháp làm sạch:

<td class="item-name"> item </td> 
<td class="order-code"> order code </td> 
<td class="item-price"> price </td> 

Sau đó chọn chỉ lớp mong muốn:

var orderCode = $(this).find('td.order-code').html().trim(); 
if(orderCode) 
{ 
    //do stuff 
} 

này cũng sẽ giúp bạn tăng tính linh hoạt trong việc tạo kiểu cho bảng bằng CSS và mã của bạn sẽ không bị hỏng nếu bạn thêm hoặc sắp xếp lại các cột.

Answer 5

Sử dụng phương thức .attr(). Kiểm tra api.jquery.com và điều đó sẽ giúp bạn có thể tìm ra cách để lấy thuộc tính colspan từ các ô của bạn.

Answer 6

More lọc những gì SLaks đã viết

$("table tbody tr td:nth-child(2):contains('code')")