Question

I have a table containing a variable number of columns. I wrote a function to iterate through each cell in each row to do the following:

1. Check for the presence of an input
2. Retrieve the value of the input
3. Append a pie chart to any cell where condition #1 evaluates to true

Here’s my code:

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

Steps 1-3 are basically working as described. When this runs the pie charts are added to the correct cells displaying the correct values. My problem is that I’m expecting just one pie chart per cell where there exists an input. However, I have n pie charts per cell where n is equal to the number of columns in the table. I suspect I’m using jQuery’s each() method incorrectly. Can someone tell me what I’ve done wrong?

Answer 1

When you select td pass the context as tr(this) so that it will look for td only in the current tr. Try this.

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

})