使用jquery遍历表格单元格

Question

我有一个包含可变列数的表格。我写了一个功能通过各行中的每个小区重复，以执行以下操作：

1. 检查输入
2. 的存在检索输入
3. 的值附加一个饼图来的任何细胞，其中条件＃1计算为真

这里是我的代码：

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

步骤1-3 basical如上所述进行工作。运行时，饼图将添加到显示正确值的正确单元格中。我的问题是，我只希望每个单元格存在一个输入的饼图。但是，我有n个饼图，其中n等于表中的列数。我怀疑我错误地使用了jQuery的each（）方法。有人能告诉我我做错了什么吗？

Answer 1

当您选择td通过上下文TR（this），因此，它只会在当前tr寻找td。尝试这个。

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

这里是我会修改你的代码：

• #MarketsTable td:has(:input)：这个选择会发现TD具有在内部

• leats一个输入元素的不需要存储你的部分HTML在变量国际海事组织，在需要时创建元素，并将其附加到TD

下面是修改后的代码：

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