Javascript / Jquery函数可基于子元素内容禁用表行

Question

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 1 then disable its row (ie ctl00_MainContent_grdSearch_i0 in above case).

(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

You can use a single line to do this with the :contains() selector. This example is assuming you're using div elements the way you described in comments.

$( "#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:

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

The first line finds any div under your itemsHolder div with the value of 1 . The second line only finds div elements with the id starting with ctl00_MainContent_grdSearch_i that have the value of 1 .

In this demo I set background-color: gray; for the disabled rows so you could see them.

Demo: 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; 
}

Script:

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

Output:

Answer 2

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');
  }
});

Answer 3

You said the table was really divs, so this works. See the fiddle here, 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');
    }
});