Javascript/Jquery 函数根据子元素内容禁用表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8564759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/Jquery function to disable table row based on child element content
提问by Zerotoinfinity
I have a table and in every row I have a cell (Example, for first row: (id: ctl00_MainContent_grdSearch_i0_c5). I need to check if this cell has value 1then disable its row (i.e. ctl00_MainContent_grdSearch_i0in above case).
我有一个表格，每一行都有一个单元格（例如，第一行：(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)
回答by ThinkingStiff
You can use a single line to do this with the :contains()selector. This example is assuming you're using divelements the way you described in comments.
您可以在:contains()选择器中使用一行来完成此操作。此示例假设您div按照您在评论中描述的方式使用元素。
$( "#ctl00_MainContent_grdSearch_itemsHolder > div:contains(1)" )
.attr( "disabled", "disabled");
If your HTML is a more complicated, you might want to be more specific and use the this line instead:
如果您的 HTML 更复杂，您可能希望更具体并使用此行：
$( "#ctl00_MainContent_grdSearch_itemsHolder > div[id^=ctl00_MainContent_grdSearch_i]:contains(1)" )
.attr( "disabled", "disabled");
The first line finds any divunder your itemsHolder divwith the value of 1. The second line only finds divelements with the idstarting with ctl00_MainContent_grdSearch_ithat have the value of 1.
第一行在divyour 下找到任何itemsHolder div值为1. 第二行仅查找div以id开头且ctl00_MainContent_grdSearch_i值为 的元素1。
In this demo I set background-color: gray;for the disabled rows so you could see them.
在这个演示中，我设置background-color: gray;了禁用的行，以便您可以看到它们。
Demo:http://jsfiddle.net/ThinkingStiff/MULSv/
演示：http : //jsfiddle.net/ThinkingStiff/MULSv/
HTML:
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:
CSS：
.item {
display: inline-block;
}
Script:
脚本：
$( "#ctl00_MainContent_grdSearch_itemsHolder > div:contains(1)" )
.attr( "disabled", "disabled").css( "background-color", "gray" );
Output:
输出：
回答by Rich O'Kelly
Try the following:
请尝试以下操作：
$('tr').find('td[id^="ctl00_MainContent_grdSearch"]').each(function() {
var self = $(this);
if (self.text() === '1') {
self.closest('tr').attr('disabled', 'disabled');
}
});
回答by nickytonline
You said the table was really divs, so this works. See the fiddle here, http://jsfiddle.net/nickyt/XVttD
你说桌子真的是 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');
}
});
