2010-07-19 28 views
10

Tengo una tabla con los datos en:jQuery selector condicional de filas de la tabla

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

estoy procesar la tabla con jQuery que necesita para encontrar el código de pedido:

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

Si no hay productos, la tabla muestra un mensaje:

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

La fila de arriba hace que la función jQuery explote. ¿Cuál es la forma más robusta de usar un selector condicional para ignorar la fila "sin productos"? ¿Hay un selector para colspan="1" o colspan is not set o lo que sea que deba ser?

Respuesta

8

No filtrar la selectora, no va a escalar bien porque jQuery tendrá que evaluar cada elemento secundario. Evite el error en su lugar ...

$('.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 
    } 
}); 
13

De esta manera:

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

Esto sólo seleccionará <tr> elementos que tienen una <td> que es el segundo hijo de su padre. (El nth-child selector es uno-based)

+0

exactamente lo que estaba buscando, gracias – fearofawhackplanet

+0

@jAndy, esa prueba es simplemente pésimo. ¡Estás probando tu solución 500 veces, pero SLaks 'se prueba 10000 veces! Y no estás redefiniendo la variable 'start' en' + new Date' después de que se ejecute tu solución ... – James

+0

No sé por qué no está seleccionando nada ('.length' muestra 0). @SLaks, creo que te has perdido ese paréntesis de cierre. Esto funciona. http://stackoverflow.com/questions/3281384/jquery-conditional-selector-for-table-rows/3281527#3281527 – IsmailS

2

podría probar cuántos td s existen:

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

Si puede cambiar la forma de generar la tabla, el uso de clases es una solución más limpia:

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

A continuación, seleccione sólo la clase deseada:

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

Este también le dará una mayor flexibilidad en el diseño de la tabla con CSS, y su código no se romperá si agrega o reordena columnas.

+0

eso es probablemente una buena idea, lo tendré en cuenta la próxima vez – fearofawhackplanet

0

Utilice el método .attr(). Echa un vistazo a api.jquery.com y eso debería ayudarte a descubrir cómo obtener el atributo colspan de tus celdas.

0

Más de filtración a lo que ha escrito SLaks

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