jQuery count tr 与 td 中的某些条件答案

【问题标题】：jQuery count tr with some condition in tdjQuery count tr 与 td 中的某些条件
【发布时间】：2014-10-04 02:56:42
【问题描述】：

我有一个包含 6 行以上表格的表格。每个tr 包含6 个td。每个td 都有一个data-name 属性：completed 或not completed。

我需要检查哪些tr 有5 个td 并将data-name 属性设置为completed。

如果该行有 5 个完整的 td 集，则该 tr 应该是绿色的。

HTML

<table id="workflowviz">
    <tr class="row">
        <td data-name="step1">0</td>
        <td data-name="stage: completed ">1</td>
        <td data-name="stage: completed ">2</td>
        <td data-name="stage: completed ">3</td>
        <td data-name="stage: completed ">4</td>
        <td data-name="stage: completed ">5</td>
    </tr>
    <tr class="row">
        <td data-name="step2">0</td>
        <td data-name="stage: completed">1</td>
        <td data-name="stage: not completed">2</td>
        <td data-name="stage: not completed">3</td>
        <td data-name="stage: not completed">4</td>
        <td data-name="Sub Stage: New ">5</td>
    </tr>
</table>

JS

我根据data-name 属性为第一行编写了下面的代码。但希望避免对 jQuery 循环中的每一行都执行此操作。

$(document).ready(function(){
    step1 = ($("td[title |='step1']")
                .parents()
                .children("td[title |='stage: completed']").length);

    //alert("Num of step1= "+step1);

    if(step1 == 5 ) {  

        // alert("Step 1 Done");
        $("td[title |='step1']")
            .parents()
            .addClass("done_colorgreen");
    }
    else {}
});

【问题讨论】：

您能否编辑您的问题以包含您的 HTML 和您为自己解决此问题而编写的任何 JS。
在这个场景中添加一个小提琴
来自stackoverflow的问候！您应该向我们展示您的一些代码/尝试，以获得好的答案/解决方案。
看我的回答你的问题..它的性能很好..

标签： javascript jquery html

【解决方案1】：

您可以使用filter 来获取每行中具有completed 值的td 元素的数量。试试这个：

$('#workflowviz tr').each(function() {
    var $tr = $(this);
    var $tds = $tr.find('td').filter(function() {
        return $(this).data('name') == 'stage: completed ';
    });
    if ($tds.length == 5) {
        $tr.addClass('green');
    }
});

Example fiddle

然后，您只需在 CSS 中设置 .green 类，即可将特定 tr 元素的背景设为绿色。

【讨论】：

【解决方案2】：

我使用您的代码为您创建了一个 jsFfiddle..

代码：-

$(document).ready(function() {
     $("table tr").each(function() {
         if ($(this).find("td[data-name='stage: completed ']").length == 5)
             $(this).addClass("green")
     })
 });

而且它的性能也不错..

工作示例：- http://jsfiddle.net/BtkCf/172/

要查看其性能，请查看此链接并打开控制台查看此代码所用的时间。 http://jsfiddle.net/BtkCf/173/

谢谢

【讨论】：

非常感谢朋友 :)