jquery - 使用 jquery 遍历表格单元格

Question

我有一个包含可变数量列的表。我编写了一个函数来迭代每行中的每个单元格以执行以下操作:

1. 检查是否存在输入
2. 检索输入的值
3. 将饼图附加到条件 #1 计算结果为 true 的任何单元格

这是我的代码:

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 基本上按照描述进行。运行时，饼图将添加到显示正确值的正确单元格中。我的问题是，我期望每个存在输入的单元格只有一个饼图。但是，我每个单元格有 n 个饼图，其中 n 等于表中的列数。我怀疑我错误地使用了 jQuery 的each() 方法。有人可以告诉我我做错了什么吗？

Answer 1

当您选择 td 时，将上下文传递为 tr(this)，以便它仅在当前 中查找 td tr。试试这个。

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

})