Question

我在表格中有一行我想点击（而不仅仅是行中的文字）所以我使用下面的代码让它打开另一页：

<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);

任何帮助将不胜感激！

Answer 1

JQuery可以附加函数来单击表格单元格上的事件，因此请为表格提供行ID，而不是$('.load_link').click()，而是使用$('.load_link, #tableId td').click()。

Answer 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。

单击表格行触发jquery

2 个答案: