Jquery在点击时选择表格行不起作用

Posted 2023-02-24

【中文标题】Jquery在点击时选择表格行不起作用

【英文标题】：Jquery to select a table row on click doesn't work

【发布时间】：2020-02-27 13:03:36

【问题描述】：

我正在尝试使用 JQuery 在单击时切换 html 表格行的类“突出显示”。该表是使用 Django 模板语言创建的。该表可以工作并显示在我的开发服务器中，而 Jquery 可以在不是使用 Django 模板语言创建的表上工作。运行代码时我没有收到任何错误，但是当我单击表格行时它什么也没做。我不确定问题可能是什么。

HTML

<style media="screen">


 .highlight 
    background-color: yellow;
    color: white;
    

</style>

<div class="table-responsive">
  <table class="table table table-borderless" id="food_table">
    <thead>
      <tr>
        <th>#</th>
        <th>Description</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      % for order in orders %
      <tr>
        <td> order.pk </td>
        <td> order.Price </td>
        <td> order.Description </td>
      </tr>
      % endfor %
    </tbody>
  </table>
</div>

JQuery

$("#food_table tbody").on('click','tr',function() 
    $(this).toggleClass("highlight");
  );

虚拟数据

[
    
        "pk": 9,
        "Description": "Pizza",
        "Price": "88.00"
    ,
    
        "pk": 10,
        "Description": "Steak",
        "Price": "130.50"
    ,
    
        "pk": 11,
        "Description": "Coca Cola",
        "Price": "25.95"
    ,
    
        "pk": 12,
        "Description": "Water",
        "Price": "15.00"
    
]

【问题讨论】：

每次在 tr 上触发 click 事件时，您是否检查了 tr？ tr 的类应该改变 - 突出显示类应该切换它的存在/不存在。

它正在工作检查这个jsfiddle.net/k9fLv31c/2

【参考方案1】：

尝试从body委派它

$("body").on('click','#food_table tbody tr',function() 
    $(this).toggleClass("highlight");
  );

【讨论】：

或许来自.table-responsive

@Bell 很乐意为您提供帮助。请考虑支持并接受它作为答案

【参考方案2】：

尝试从身体开始

$('body').on('click', '#food_table tbody tr', function()
    $(this).toggleClass('highlight');
);

【参考方案3】：

你必须尝试一些这样的。 #food_table 必须使用 .click 函数 jquery 调用，并且必须在 html 模板中导入 jquery 资源

$("#food_table").click(function()
     $(this).toggleClass('highlight');
   );

这对我来说很好。