jQuery单击表格单元格事件

Posted 2023-03-05

【中文标题】jQuery单击表格单元格事件

【英文标题】：jQuery click on table cell event

【发布时间】：2011-09-11 13:16:23

【问题描述】：

我有一个像下面这样的html代码

<tbody>
  <tr id="info">
    <td class="name">Joe</td>
    <td class="surname">White</td>
    <td class="age">25</td>
 </tr>
</tbody>

还有一个像这样的jQuery代码：

$("tr#info").click(function()         // function_tr
  $(this).css("background-color","yellow");
);

$("tr#info td").click(function()      // function_td
  $(this).css("font-weight","bold");
);

当我点击td 时，function_td 可以正常工作，但function_tr 也可以。 如何防止function_tr？

【参考方案1】：

你需要使用event.stopPropagation()

$("tr#info td").click(function(e)     //function_td
  $(this).css("font-weight","bold");
  e.stopPropagation();
);

【参考方案2】：

$("tr#info td").click(function(e)     //function_td
  $(this).css("font-weight","bold");
  e.stopPropagation();
);

http://api.jquery.com/event.stopPropagation/