Iterazione tramite celle di tabella utilizzando jquery

Question

Ho una tabella contenente un numero variabile di colonne. Ho scritto una funzione per scorrere ogni cella in ogni riga per effettuare le seguenti operazioni:

1. Verificare la presenza di un ingresso
2. recuperare il valore dell'ingresso
3. Aggiungere un grafico a torta per ogni cella in cui condizione # 1 restituisce true

Ecco il mio codice:

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 }); 
} 

passaggi 1-3 sono basical funziona come descritto Quando viene eseguito, i grafici a torta vengono aggiunti alle celle corrette che mostrano i valori corretti. Il mio problema è che mi aspetto un solo grafico a torta per cella in cui esiste un input. Tuttavia, ho n grafici a torta per cella dove n è uguale al numero di colonne nella tabella. Sospetto che sto usando il metodo each() di jQuery in modo errato. Qualcuno può dirmi cosa ho fatto di sbagliato?

Answer 1

Quando si seleziona td passare il contesto come TR (this) in modo che cercherà td solo nel corrente tr. Prova questo.

$("#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

Ecco come vorrei modificare il vostro codice:

• #MarketsTable td:has(:input): questo selettore troverà TD che ha al leats elemento un ingresso all'interno

• alcuna necessità di memorizzare le parti html nelle variabili IMO, basta creare l'elemento quando necessario e aggiungerlo al TD

Ecco il codice modificato:

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