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

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

<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 или все, что потребуется быть?

10
html html-table jquery jquery-selectors

6 ответов

не уточняйте селектор, он не будет масштабироваться хорошо, потому что 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 
   }
});
8

такой:

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

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

13

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

<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, и ваш код не сломается, если вы добавите или измените порядок столбцов.

3

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

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

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

0

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

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

0