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

Question

我有一个表，每行都有一个单元格（例如，第一行：(id: ctl00_MainContent_grdSearch_i0_c5)。我需要检查此单元格是否具有值1然后禁用其行（即{{ 1}}在上面的例子中。）

ctl00_MainContent_grdSearch_i0

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");

第一行在div下找到itemsHolder div下的1值div。第二行仅查找id元素，其中ctl00_MainContent_grdSearch_i以1开头，其值为background-color: gray;。

在本演示中，我为已禁用的行设置<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> ，以便您可以看到它们。

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

HTML：

.item {
    display: inline-block; 
}

CSS：

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

脚本：

{{1}}

输出：

Answer 2

尝试以下方法：

$('tr').find('td[id^="ctl00_MainContent_grdSearch"]').each(function() {
  var self = $(this);
  if (self.text() === '1') {
    self.closest('tr').attr('disabled', 'disabled');
  }
});

Answer 3

你说这张桌子真的是div，所以这很有用。请参阅此处的小提琴，http://jsfiddle.net/nickyt/XVttD

var rows = $("div[id*='MainContent_grdSearch_i0_c']");

rows.each(function() {
    var row = $(this);

    if (row.text() === "1") {
        row.attr('disabled', 'disabled');
    }
});