jQuery условный селектор для строк таблицы

Question

У меня есть таблица с данными в:

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

Я обрабатываю таблицу с помощью jQuery, который должен найти код заказа:

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

Если продуктов нет, в таблице отображается сообщение:

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

В приведенном выше ряду функция jQuery сработает.Какой самый надежный способ использовать условный селектор для игнорирования строки «нет товаров»?Есть ли селектор для colspan="1" или colspan is not set или что бы это ни было?

Answer 1

Например:

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

Это будет выбирать только <tr> элементов, которые имеют <td>, который является вторым дочерним элементом своего родителя.(селектор nth-child односторонний)

Answer 2

Не уточняйте ваш селектор, он не будет хорошо масштабироваться, потому что jQuery должен будет оценить каждый дочерний элемент.Вместо этого избегайте ошибок ...

$('.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 3

Если вы можете изменить способ создания таблицы, использование классов является более чистым решением:

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

Затем выберите только нужный класс:

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

Это также даст вам большую гибкость при оформлении таблицы с помощью CSS, и ваш код не сломается, если вы добавите или измените порядок столбцов.

Answer 4

Вы можете проверить, сколько td с:

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

Answer 5

Больше фильтрации к тому, что написал SLaks

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

Answer 6

Используйте метод .attr(). Проверьте api.jquery.com, и это должно помочь вам понять, как получить атрибут colspan из ваших ячеек.