Iteración a través de celdas de tabla usando jquery

Question

Tengo una tabla que contiene un número variable de columnas. Escribí una función para iterar a través de cada célula en cada fila para hacer lo siguiente:

1. comprobar la presencia de una entrada
2. Recuperar el valor de la entrada
3. Anexar un gráfico circular a cualquier celda donde la condición # 1 se evalúa como verdadera

Aquí está mi código:

function addPieCharts() { 
var htmlPre = "<span class='inlinesparkline' values='"; 
var htmlPost = "'></span>" 
var colors = ["red", "blue"]; 

$("#MarketsTable tr").each(function() { 

    $('td').each(function() { 
     var value = $(this).find(":input").val(); 
     var values = 100 - value + ', ' + value; 

     if (value > 0) { 
      $(this).append(htmlPre + values + htmlPost); 
     } 
    }) 

}) 

$('.inlinesparkline').sparkline('html', { type: 'pie', sliceColors: colors }); 
} 

Pasos 1-3 son basical trabajando como se describe. Cuando esto se ejecuta, los gráficos circulares se agregan a las celdas correctas que muestran los valores correctos. Mi problema es que estoy esperando solo un gráfico circular por celda donde exista una entrada. Sin embargo, tengo n gráficos circulares por celda donde n es igual al número de columnas en la tabla. Sospecho que estoy usando el método de cada uno de jQuery incorrectamente. ¿Alguien puede decirme qué he hecho mal?

Answer 1

Al seleccionar td pasan el contexto como tr (this) para que se buscará td sólo en la corriente tr. Prueba esto.

$("#MarketsTable tr").each(function() { 

    $('td', this).each(function() { 
     var value = $(this).find(":input").val(); 
     var values = 100 - value + ', ' + value; 

     if (value > 0) { 
      $(this).append(htmlPre + values + htmlPost); 
     } 
    }) 

}) 

Answer 2

Aquí es cómo se modificaría código:

• #MarketsTable td:has(:input): este selector se encuentra TD que tiene al leats elemento de una entrada en el interior

• hay necesidad de almacenar sus partes html en variables IMO, solo crea el elemento cuando sea necesario y añádelo al TD

Aquí está el código modificado:

function addPieCharts() { 

    var colors = ["red", "blue"]; 

    // directly select the TD with an INPUT element inside 
    $('#MarketsTable td:has(:input)').each(function() { 

     var value = $(this).find(":input").val(); 

     if (value > 0) { 

      // only make the values string if necessary, when value > 0 
      var valStr = (100 - value).toString() + ', ' + value; 

      // create your span tag and append it to 'this' (the TD in this case) 
      $('<span class="inlinesparkline" values="' + valStr + '"></span>').appendTo(this); 
     } 

    }); 

    $('.inlinesparkline').sparkline('html', { 
     type: 'pie', 
     sliceColors: colors 
    }); 
} 

DEMO