如何在Jquery中的click事件上传递元素的ID

Question

I have a table with number of rows and I am using with click to show hidden rows. In each hidden rows I have a div with name content. That in this div I am using ajax to load second page. Actually when I click to Show button the second page will be appear in the div with classname content. My question :- is there a way to passing id of each row (the id of each row is in input hidden with name id) to the function on click event then use of that passed id in href to send to second page ? Here is my Snippet :-

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

Thanks

Answer 1

You can use .find() / .children() to target the hidden element, then .val() can be used.

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

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

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