如何在Jquery

Question

我有一个包含行数的表，我使用click来显示隐藏的行。在每个隐藏的行中，我有一个名称内容的div。在这个div中我使用ajax加载第二页。实际上，当我点击“显示”按钮时，第二页将出现在包含classname内容的div中。我的问题： - 有没有办法将每行的id（每行的id在名称为id的隐藏输入中）传递给click事件上的函数，然后使用href中传递的id发送到第二页？ 这是我的代码片段： -

$(function() {
  $(".show").on("click", function(e) {
    	var id = $(this).find(':hidden').val();
    e.preventDefault();
    $(this).closest("tr").next().find(".content").slideToggle();
	  $(".content").load("/secondpage.htm?id="+id+"");
    alert(id)
  });
});

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<tr>
<td>title</td>
<td>title</td>
<td>title</td>
<td><a href="#" class="show"><input type="hidden" val="123" name="id"/>Show </a></td>
</tr>
<tr id="tr_2_1_0" class="subRow">
<td colspan="6"><div class="contentdiv"></div></td>
</tr>
  <tr>
<td>title</td>
<td>title</td>
<td>title</td>
<td><a href="#" class="show"><input type="hidden" val="123" name="id"/>Show </a></td>
</tr>
<tr id="tr_2_1_0" class="subRow">
<td colspan="6"><div class="contentdiv"></div></td>
</tr>

</table>

由于

Answer 1

您可以使用.find() / .children()定位hidden元素，然后可以使用.val()。

$(".show").on("click", function(e) {
    e.preventDefault();
    var id = $(this).find(':hidden').val();
    $(".content").load("/secondpage.htm?id=" + id);
    console.log(id )
});

＆＃13;

＆＃13;

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    console.log($(this).find(':hidden').val())
	$(this).parent().toggleClass('rotati')
    $(this).closest("tr").next().find(".content").slideToggle();
	  $(".content").load("/secondpage.htm?id=@id");
  });
});

＆＃13;

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
  <caption>Ajax Test Table</caption>
  <thead>
    <tr align="center" class="parentRow">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <input type="hidden" value="123" name="id"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p></p></div>
      </td>
    </tr>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <input type="hidden" value="456" name="id"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
 
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p></p></div>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;