jQuery bedingte Selektor für Tabellenzeilen

Question

Ich habe eine Tabelle mit Daten in:

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

Ich bin der Verarbeitung der Tabelle mit jQuery, die den Bestellcode finden muss:

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

Wenn Es gibt keine Produkte, die Tabelle zeigt eine Nachricht:

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

Die obige Zeile bewirkt, dass die jQuery-Funktion ausgebombt wird. Was ist der stabilste Weg, einen bedingten Selektor zu verwenden, um die Zeile "keine Produkte" zu ignorieren? Gibt es einen Selektor für colspan="1" oder colspan is not set oder was immer es sein müsste?

Answer 1

Sie nicht Ihre Wähler verfeinern, wird es nicht gut skalieren, weil jQuery wird jedes Kind Element zu bewerten haben. Vermeiden Sie den Fehler stattdessen ...

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

So:

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

Diese wählt nur <tr> Elemente, die eine <td> haben, dass das zweite Kind seiner Eltern ist. (Die nth-child selector ist ein Basis)

Answer 3

Sie können testen, wie viele td s gibt es:

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

Wenn Sie ändern können, wie Sie die Tabelle generieren, Klassen ist eine saubere Lösung:

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

dann nur die gewünschte Klasse auswählen:

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

diese Außerdem können Sie die Tabelle flexibler mit CSS formatieren, und Ihr Code bricht nicht, wenn Sie Spalten hinzufügen oder neu anordnen.

Answer 5

Verwenden Sie die .attr() Methode. Schauen Sie sich api.jquery.com an und das sollte Ihnen helfen, herauszufinden, wie Sie das colspan-Attribut von Ihren Zellen erhalten.

Answer 6

Mehr Filtration, was SLaks hat

geschrieben

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