在 jQuery 中选择特定的 td

Question

如果行包含特定值，我想检查表的复选框。

下面是我的表

<table width="100%" cellspacing="0" border="1" style="border-width: thin; border-collapse: collapse;
    border-color: #999999" id="tableControlFailures">
    <tbody>
        <tr>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                <input type="checkbox" id="chkCF">
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                C1
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999"
                id="tdCFReason">
                <input type="text" id="txtCFReason" style="width: 90%" disabled="disabled">
            </td>
            <td id="CFId" style="display: none">
                22
            </td>
        </tr>
        <tr>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                <input type="checkbox" id="chkCF">
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                C2
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999"
                id="tdCFReason">
                <input type="text" id="txtCFReason" style="width: 90%" disabled="disabled">
            </td>
            <td id="CFId" style="display: none">
                23
            </td>
        </tr>
        <tr>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                <input type="checkbox" id="chkCF">
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999">
                c
            </td>
            <td style="border-width: thin; border-collapse: collapse; border-color: #999999"
                id="tdCFReason">
                <input type="text" id="txtCFReason" style="width: 90%" disabled="disabled">
            </td>
            <td id="CFId" style="display: none">
                9
            </td>
        </tr>
    </tbody>
</table>

，我想检查隐藏列 CFId 包含 23 & 的行。 9.

请提出解决方案。

Answer 1

一件非常重要的事情，正如其他人也提到的：

ID 只能在 HTML 文档中使用一次。在您的标记中，您多次使用 ID，这是无效的，并且会破坏 CSS和 JavaScript 功能。如果要将某些元素分配到同一逻辑组中，请改用class。我的解决方案在将这些 ID 更改为类后起作用（如 jsFiddle 中所示）。

$('#tableControlFailures tr').filter(function () {
    return $(this).find('td.CFId:contains(23), td.CFId:contains(9)').length > 0;
}).find('input.chkCF').attr('checked', true);

jsFiddle 演示

1. 它获取表中的所有行，
2. 使用过滤功能过滤它们，只有那些具有td.CFId 里面包含 23 或 9
3. 在剩余的行集中，找到复选框并选中它们

注意： 我的解决方案是为 jQuery 1.5.2 编写的。在 1.6 中，您应该使用 .prop('checked', true) 而不是 .attr('checked', true)。

Answer 2

我建议你稍微修改一下标记。您正在重复表格单元格的 id id="CFId"，而不是尝试 class="CFId"。 JQuery 提供了使用 CSS 规则读取此类元素的解决方案。因此，您应该能够使用“td.CFId”CSS 规则读取具有 CFId 类的表格单元格。

然后迭代它并检查值。要到达该行，您可以尝试 ele.parentNode 进行 CSS 修改，以根据值更改颜色和背景。

//to change the color based on some value
if($(cell).innerHTML === '23') {
    $(cell).parentNode.style.color = 'red'
}

除非您只是不想坚持使用 JQuery，否则该解决方案应该可以使用 JQuery API 和简单的 JavaScript 为您工作。

Answer 3

尝试这个

$("#tableControlFailures").find("td:contains('22'), td:contains('23')").parent("tr").find("#chkCF").prop("checked", true);

示例 JS FIDDLE

但是，正如其他人所说，您应该更改您的 td 以具有唯一的 id并使用类对元素进行分组。在您设置唯一 ID 后，我的解决方案仍然有效

Answer 4

$("table").find("td:contains('23'),td:contains('9')").find(":checkbox").attr("checked",true);'