根据图像标题将不同的类应用于表tr

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更改为bggreen，我怎么能这样做，任何帮助表示赞赏。

到目前为止，我正在使用此代码查找图片标题

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

    });

供参考我正在添加html的图像

Answer 1

您的代码大多是正确的。我不得不在第一个选择器中更改表id。我删除了td:eq(2)。这不对。假设行中只有一个图像，您可以直接选择图像。

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

不是遍历每个tr，而是遍历每个img，这样可以提高性能并减少不必要的遍历。以下是更新后的代码：

＆＃13;

＆＃13;

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

＆＃13;

.bgwhite {
  background: red;
}

.bggreen {
  background: green;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您只想更改以class="bgwhite"开头的那些标准，那么您需要做的是明确地遍历这些标准，然后检查每个标记是否至少有一个img title="Locked" 1}}里面。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

$("#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');
        }
    });

感谢大家的支持和建议，我找到了解决问题的方法，在这里我发布了适用于我的代码。