通过单击表格行触发jquery答案

【问题标题】：Trigger jquery by clicking on table row通过单击表格行触发jquery
【发布时间】：2011-06-05 20:24:21
【问题描述】：

我希望在表格中有一行可以点击（而不仅仅是行中的文本），所以我使用以下代码使其打开另一个页面：

<td onClick="document.location.href='content2.html';" style="cursor:pointer;">

但是现在我使用带有以下代码的 jquery 在 div 中而不是在新页面中打开新页面。我将如何更新我的行代码以在 div 中而不是在新页面中打开内容。

在实际文本中，我使用以下内容：

<a class="load_link" style="cursor:pointer;">Link<a>

但是，正如我上面所说，我想让整行都可点击，而不仅仅是文本。

用于更新内容的JQuery：

$(document).ready(function(){
     $("#content").load("content.html");
});

(function($) {  
$(function() {  
 $('.load_link').click(function() {  
   $("#content").load("content.html");  
   var $row = $(this).closest("tr");
   $row.removeClass("rownotselected").addClass("rowselected");
   $row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
   return false;   
 });  
});  
})(jQuery);

任何帮助将不胜感激！

【问题讨论】：

您的点击正在加载 content.html 而不是 content2.html - 这是故意的吗？另外，是所有链接都加载content2.html 还是从他们自己的href 加载值？
如果我正确理解了您的要求，我想只是将类 load_link 从移动到应该可以解决问题。你说你想要行 ( ) 上的点击事件，但你已经在列 () 上放了 -->

标签： jquery

【解决方案1】：

JQuery 可以附加函数来点击表格单元格上的事件，所以给表格行在一个 id 中，而不是$('.load_link').click()，使用$('.load_link, #tableId td').click()。

【讨论】：

【解决方案2】：

<style>
.clickable {
  cursor: pointer;
  color:blue;
}
.content {
  border: solid 1px #eee;
  padding: 10px;
}
</style>

<table>
  <tbody>
    <tr class="clickable">
      <td>
        jas
      </td>
    </tr>
  </tbody>
</table>

<div class="content"></div>
<script>
  $(".clickable").on("click", function(){
    $(".content").load("home.html");
  });
</script>

为了使单个行可点击，我们可以将类分配给 tr。单击 tr 时，更新 div。

【讨论】：