Question

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

检查是否存在输入
检索输入值
将饼图附加到条件＃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基本上如所描述的那样工作。运行时，饼图会添加到显示正确值的正确单元格中。我的问题是，我希望每个单元格只有一个饼图，其中存在输入。但是，我每个单元格有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);
        }
     })

})

Answer 2

以下是我修改代码的方法：

#MarketsTable td:has(:input)：此选择器会找到TD内部的一个INPUT元素
无需将您的html部分存储在变量IMO中，只需在需要时创建元素并将其附加到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

Answer 3

迭代每个表格元素和嵌套单元格以找出每个表格的单元格数

$(document).ready(function() {
    
   $("table").each(function (index) {
                
                var cellCount=0; 
                $("td",this).each(function (i){
                    cellCount++;
                })
                alert(cellCount);                
   })
});

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

使用jquery迭代表单元格

3 个答案: