Javascript/Jquery 函数根据子元素内容禁用表格行

Question

我有一个表格，每一行都有一个单元格(例如，第一行:(id: ctl00_MainContent_grdSearch_i0_c5)。我需要检查这个单元格是否有值 1 然后禁用它的行(即 ctl00_MainContent_grdSearch_i0 在上面的例子中)。

(id: ctl00_MainContent_grdSearch_itemsHolder)

row (id: ctl00_MainContent_grdSearch_i0)
row (id: ctl00_MainContent_grdSearch_i1)
row (id: ctl00_MainContent_grdSearch_i2)

Answer 1

您可以使用 :contains() 选择器在一行中完成此操作。此示例假设您按照评论中描述的方式使用 div 元素。

$( "#ctl00_MainContent_grdSearch_itemsHolder > div:contains(1)" )
    .attr( "disabled", "disabled");

如果您的 HTML 更复杂，您可能想要更具体并改用这一行:

$( "#ctl00_MainContent_grdSearch_itemsHolder > div[id^=ctl00_MainContent_grdSearch_i]:contains(1)" )
    .attr( "disabled", "disabled");

第一行在您的 itemsHolder div 下找到值为 1 的任何 div。第二行只查找 id 以 ctl00_MainContent_grdSearch_i 开头且值为 1 的 div 元素。

在此演示中，我为禁用的行设置了 background-color: gray;，以便您可以看到它们。

演示: http://jsfiddle.net/ThinkingStiff/MULSv/

HTML:

<div id="ctl00_MainContent_grdSearch_itemsHolder">
    <div id="ctl00_MainContent_grdSearch_i0">
        <div id="ctl00_MainContent_grdSearch_i0_c0" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i0_c1" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i0_c2" class="item">0</div>
    </div>
    <div id="ctl00_MainContent_grdSearch_i1">
        <div id="ctl00_MainContent_grdSearch_i1_c0" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i1_c1" class="item">1</div>
        <div id="ctl00_MainContent_grdSearch_i1_c2" class="item">0</div>
    </div>
    <div id="ctl00_MainContent_grdSearch_i2">
        <div id="ctl00_MainContent_grdSearch_i2_c0" class="item">1</div>
        <div id="ctl00_MainContent_grdSearch_i2_c1" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i2_c2" class="item">0</div>
    </div>
    <div id="ctl00_MainContent_grdSearch_i3">
        <div id="ctl00_MainContent_grdSearch_i3_c0" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i3_c1" class="item">0</div>
        <div id="ctl00_MainContent_grdSearch_i3_c2" class="item">0</div>
    </div>
</div>

CSS:

.item {
    display: inline-block; 
}

脚本:

$( "#ctl00_MainContent_grdSearch_itemsHolder > div:contains(1)" )
    .attr( "disabled", "disabled").css( "background-color", "gray" );

输出: