单击时更改 html 表格行的背景颜色

Question

我需要在单击时更改表格行的背景颜色。我知道有很多关于此的帖子，但我的用例有些独特，找不到相关帖子..

下面的代码显示了

<tr>

，它有一个onclick，当

<tr>

被执行时自动触发另一个按钮。由于这个onclick的存在，看起来

<tr>

点击自动传递给onclick而不是与

<tr>

本身一起保留..因此，背景颜色会出现一小会儿并在执行onclick按钮时消失..

我想保持 onclick 不变，但希望表格行选择能够独立处理（即，更改背景颜色不应与执行 onclick 相关联）。我已经尝试过 event.stopPropagation() 但它根本不让我执行 onclick ..我需要帮助来实现这一点，谢谢..

<tr class="clickable-row" id="asset-{{ asset.id }}" 
        onclick="setTimeout(function() { document.getElementById('detailProductForm').click(); }, 300);">
        <td hx-get="{% url 'portfolio:asset-update' asset.id %}" hx-target="#assetUpdate"
        hx-swap="outerHTML" class="col-md-12 col-lg-12 node-style">
          &emsp;{{ asset.name }}</td>
      </tr>


<script>
    $("#assetTree tr").click(function () {
    var selected = $(this).hasClass("active-row-dark");
    $("#assetTree tr").removeClass("active-row-dark");
    if (!selected)
      $(this).addClass("active-row-dark");
  });

</script>

上面被包裹在 div 中，id=assetTree

Answer 1

$(this).parents( ).first();

如果你点击了行（TR）..你点击了数据（TD）。这意味着您的操作应该处理点击数据（TD）然后它的父级（TR）添加了类。

你可以解决这个问题。在里面我会描述你的逻辑接近okay

<script>
    $("#assetTree tr").click(function () {
    var selected = $(this).hasClass("active-row-dark"); 
//you are check if the object have the class
    $("#assetTree tr").removeClass("active-row-dark");
//why remove it? better remove it if it has class
    if (!selected)
      $(this).addClass("active-row-dark");
  });

</script>

开始之前..我希望你把表结构做成这样的可读性

<table id='assetTree'>
<tr class='listXYZ'>
<td></td>
</tr>
</table>

将 listXYZ 更改为 other.

<script>
$("#assetTree td").click(function () {
    obj = $(this).parents('.listXYZ').first();
    stat = obj.hasClass("active-row-dark"); 
    
    if (!stat){
      obj.addClass("active-row-dark");
    }else{
      obj.removeClass("active-row-dark");
    }
});

</script>

阅读更多：

Jquery - 查找具有班级名称的最近父母

https://api.jquery.com/parent/