根据图像标题应用不同的 class 到 table 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 class 从 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

您的代码大部分是正确的。我不得不在第一个 selector 中更改 table id。我删除了 td:eq(2)。这是不正确的。您可以直接 select 图片，而不是假设该行中只有一张图片。

$("#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，这样可以提高性能并减少不必要的遍历。以下是更新后的代码：

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

如果您只想更改以 class="bgwhite" 开头的那些 trs，您需要做的是显式遍历这些，然后检查每个是否至少有一个 img 以 title="Locked"里面。

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>

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

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

根据图像标题应用不同的 class 到 table tr

Apply different class to table tr based on image title

xhtml

jquery