jQuery单击表格单元格事件答案

【问题标题】：jQuery click on table cell eventjQuery单击表格单元格事件
【发布时间】：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？

【问题讨论】：

标签： jquery html-table cell

【解决方案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/

【讨论】：