使用jQuery迭代表格单元格

Question

使用jQuery迭代表格单元格

14

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

检查输入是否存在
获取输入的值
在满足条件 #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（）方法。有人能告诉我我做错了什么吗？

- hughesdan

3个回答

1

以下是我修改您代码的方式：

#MarketsTable td:has(:input)：这个选择器将查找包含至少一个INPUT元素的TD
在我看来，无需将您的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
    });
}

演示

- Didier Ghys

我注意到你消除了嵌套的each()。你这样做有没有性能优势？ - hughesdan

1

重型选择器不是很高效。.each() 比 for...loop 更低效。老实说，我不知道哪种方式更高效。我想这取决于你的表有多大。 - Didier Ghys

谢谢。我因为你的回答学到了一些东西，所以点了+1。我不知道在选择器中可以使用“has”。 - hughesdan

0

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

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

- rajquest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ShankarSangoli · Accepted Answer

当你选择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);
        }
     })

})