如何根据同一 <tr> 中另一个 <td> 的值更改 <td> 子元素的类答案

【问题标题】：How to change the class of a <td> sub element depending on the value of another <td> in the same <tr>如何根据同一 <tr> 中另一个 <td> 的值更改 <td> 子元素的类
【发布时间】：2022-02-04 21:23:31
【问题描述】：

我有一个多列表，其中一个 td 包含订单状态，另一个 td 包含一个按钮标签。我想要实现的是如果订单状态设置为“部分完成”则隐藏按钮标签，如果状态设置为“未完成”则显示按钮。下面是表中 tr 之一的 html -

<tr class="order-row ui-sortable-handle" data-index="46929" data-position="4">
    <td style="text-align:center">4</td>
    <td style="text-align:center">46929</td>
    <td style="text-align:center">13/12/2021</td>
    <td style="text-align:center">PS Machine shop (X)</td>
    <td style="text-align:center">PSMAC</td>
    <td style="text-align:center">Part complete</td>
    <td style="text-align:center">1</td>
    <td style="text-align:center"><button class="hide-unassign unassign-button" type="button"><i class="icon_fa fas fa-trash"></i></button></td>
</tr>

我正在使用 jQuery 将 .addClass 隐藏-取消分配给按钮标签，css 下面 -

.hide-unassign {
    display: none;
}

这在隐藏按钮标签方面效果很好，但是如果状态 td 中的值包含文本“部分完成”，我就无法应用它。

这是我正在运行的 jQuery -

$("#Orders-Allocated").each(function(){
    $('.button').has('.td:contains("Part complete")').addClass(' hide-unassign');
});

这会将 hide-unassign 类添加到所有行上的所有按钮元素。不是我想要达到的。

任何建议将不胜感激。

【问题讨论】：

试试 $(this).find('.button').has('')...，不是 100% 肯定，因为似乎缺少一些标记。
如何生成 html？在生成 tr 时添加一个类会简单得多，例如 <tr class='order-row complete'.. 然后 css tr.complete >td > .unassign-button { display:none; }

标签： html jquery

【解决方案1】：

您选择了按钮，但您应该选择表格行。您还在“按钮”和“td”中添加了点。点表示它们是类。元素没有点前缀

所以这是一个可行的例子

$('tr')
  .has('td:contains("Part complete")')
  .find('button')
  .addClass('hide-unassign');

您也可以使用.order-row，而不是tr。或者如果#Orders-Allocated 是表行上下文/ID，您可以使用this

【讨论】：

如果你反转它们，这类查询通常会更容易——而不是找到包含 td 的 tr，找到 td 然后获取 tr，例如：$('td:contains("Part complete")').closest("tr").find("button") 此处的细微差别，但更复杂的“.find”可以更容易编码+理解。