私はこのようなコードを持っている画像のタイトル

Question

<table id='xhtmlgrid'> 
<tbody> 
<tr class='bgwhite'> 
<td> 
<table> 
<tbody> 
<tr> 
<td> 
<span> 
<img src="./secured_off1.png"> 
</span> 
</td> 
<td> 
<span> 
<img src="./secured_off2.png"> 
</span> 
</td> 
<td> 
<span> 
<img src="./secured_off3.png" title="Locked"> 
</span> 
</td> 
<td> 
<span> 
<img src="./secured_off4.png"> 
</span> 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
</tr> 
</tbody> 
</table> 

に基づいてTRテーブルに別のクラスを適用し、画像のタイトルに基づいて、私はそのTRで複数のイメージを持って、私はにbgwhiteからTRクラスを変更したいですbggreen、どうすればいいですか？

これまでのところ、私はあなたのコードはほとんど正しいHTML

Answer 1

$("#xhtml_grid table > tbody > tr").each(function() { 
     var hdnLock = $(this).find('td:eq(2)').find('img').attr('title'); 
     if (hdnLock == 'Locked') { 
      $(this).parents('tr').css('background-Color', '#ddff99'); 
     } 
    }); 

ご支援とご提案をしてくれてありがとうみんな、私はここで私は私のために働いた私のコードを掲示しています、私の問題のための方法を見つけました。

Answer 2

の画像を追加している参照用画像のタイトル

$("#xhtml_grid table > tbody > tr").each(function() { 
     var hdnLock = $(this).find('td:eq(2)').find('img').attr('title'); 
     if (hdnLock == 'Locked') { 
     } 

    }); 

を見つけるために、このコードを使用しています。最初のセレクタでテーブルIDを変更する必要がありました。そしてtd:eq(2)を削除しました。それは正しくありませんでした。行に1つのイメージしかないと仮定して、イメージを直接選択することができます。

$("#xhtmlgrid tbody > tr").each(function() { 
 
    var hdnLock = $(this).find('img').attr('title'); 
 
    if (hdnLock == 'Locked') { 
 
    $(this).addClass('bggreen').removeClass('bgwhite'); 
 
    } 
 
});

.bgwhite { 
 
    background: red; 
 
} 
 

 
.bggreen { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='xhtmlgrid'> 
 
    <tbody> 
 
    <tr class='bgwhite'> 
 
    <td> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <img src="./secured_off.png" title="Locked"> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

代わりの各々trを横断、パフォーマンスを改善し、不要なトラバースを低減するであろうと、各imgを通してトラバース。以下は、更新されたコードです：

$("#xhtmlgrid table > tbody > tr > td > img").each(function() { 
 
    if ($(this).attr('title') == 'Locked') { 
 
    $(this).closest('tr').addClass('bggreen').removeClass('bgwhite'); 
 
    } 
 
});

.bgwhite { 
 
    background: red; 
 
} 
 

 
.bggreen { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='xhtmlgrid'> 
 
    <tbody> 
 
    <tr class='bgwhite'> 
 
     <td> 
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <img src="./secured_off.png" title="Locked"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <img src="./secured_off.png" title="unlocked"> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

あなただけあなたが何をする必要があるかclass="bgwhite"から始めたものTRSを、変更したい場合は、明示的にそれらの上にトラバースでは、その後、それぞれの場合にチェック内部にtitle="Locked"の少なくとも1つのimgがあります。

var whiteTrs = document.querySelectorAll('#xhtmlgrid tr.bgwhite'); 
 
whiteTrs.forEach(function(tr) { 
 
    if (tr.querySelector('img[title="Locked"]')!=null) 
 
    tr.className = 'bggreen'; 
 
});

.bgwhite {background:white} 
 
.bggreen {background:green}

<table id='xhtmlgrid'> 
 
<tbody> 
 
<tr class='bgwhite'> 
 
<td> 
 
<table> 
 
<tbody> 
 
<tr> 
 
<td> 
 
<span> 
 
<img src="./secured_off1.png"> 
 
</span> 
 
</td> 
 
<td> 
 
<span> 
 
<img src="./secured_off2.png"> 
 
</span> 
 
</td> 
 
<td> 
 
<span> 
 
<img src="./secured_off3.png" title="Locked"> 
 
</span> 
 
</td> 
 
<td> 
 
<span> 
 
<img src="./secured_off4.png"> 
 
</span> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>