通过单击表行来触发jQuery [英] Trigger jquery by clicking on table row

问题描述

我在表中有一排我希望使其可单击(而不只是行中的文本)，因此我使用以下代码使它可以打开另一个页面:

I have a row in a table that I like to make clickable (rather than just the text in the row) so I use the following code to make it open another page:

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

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

However now I am using jquery with the below code to open the new page within a div rather than in a new page. How would I update my row code to open the content in the div rather than in a new page.

在实际文本上，我使用以下内容:

On the actual text I use the following:

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

但是，正如我上面说的，我想使整个行都可以单击，而不仅仅是文本.

However, as I said above I'd like to make the whole row clickable rather than just the text.

用于更新内容的jQuery:

JQuery used to update the content:

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

任何帮助将不胜感激！

推荐答案

<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.

For making individual rows clickable, we can assign class to tr. On clicking tr, update the div.

这篇关于通过单击表行来触发jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！