鼠标点击时动态加载显示表格的下一行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标点击时动态加载显示表格的下一行</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $("table tr td").click( function () { //获取点击行的id选择器值 var target = $(this).parent().children().children().attr("id"); //取得下一行的id选择器 var subId = "#"; subId += target.substr(5, target.length); //获取点击行的用户名 var temp = $(this).parent().children("td:eq(1)").html(); //发出请求 $(document).ready(function () { $.ajax({ type: "post", url: "query.php", data: { action: "detail", username: temp }, dataType: "text", //在返回数据前用进度条显示,提高用户体验 beforeSend: function (XMlhttprequest) { $(subId).children().html("<img src=\"load.gif\"></img>"); }, //返回数据,操作htm值 success: function (data) { $(subId).children().html(data); } }); //显示行 $(subId).toggle(); }); </script> </head> <body> <table> <tr><td>ID</td><td>用户名</td><td id="index0">题目总数</td></tr> <tr><td>1</td><td>joan</td><td id="index1">4</td></tr> <tr display="none" id="0"><td colspan="3"></td></tr> <tr><td>2</td><td>joansky</td><td id="index1">3</td></tr> <tr display="none" id="0"><td colspan="3"></td></tr> </table> </body> </html> |
这个表格显示用户基本情况,下一行显示用户题目信息。
我想把这个表格设计为当鼠标点击用户的基本情况时,根据用户名动态查询用户题目信息后显示出来
怎么获取鼠标点击的是哪一行呢?
利用$(this).parent().children().children().attr("id")可以获取鼠标点击该行的id选择器值,然后使用获得的id选择器去获取下一行的元素,最后使用.toggle()让其交替显示隐藏。
解析$(this).parent().children().children().attr("id")
$(this).parent()取得<td>1</td><td>joan</td><td id="index1">4</td>
$(this).parent().children()取得<td>1</td>
$(this).parent().children().children()取得<td id="index1">4</td>
$(this).parent().children().children().attr("id") = "index1"
最新评论