i doing 1 project, in want display data in nested table structure, in link
http://www.aspdotnet-suresh.com/2012/05/gridview-with-in-gridview-or-nested.html in please check in down demo. implemented in grid view in asp.net. trying implementing in html. got solution but, problem in table if clicking in row displaying next row. need first td of tr clicked have display tr other wise nothing.
, html code below. please body me.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function() { $(".toptable > tbody > tr:not(.accordion)").hide(); $(".toptable tr:first-child").show(); $(".toptable tr.accordion").click(function(){ $(this).next().fadetoggle(); }); }); </script> </head> <body> <table class="toptable" border="1"> <tbody> <tr class="accordion"> <td class="id1">td1</td> <td>td2</td> <td>td3</td> </tr> <tr> <td colspan="3"> <table class="nested" border="1" > <tbody> <tr> <td>nestedtd1</td> <td>nestedtd2</td> </tr> <tr> <td>nestedtd3</td> <td>nestedtd4</td> </tr> </tbody> </table> </td> </tr> <tr class="accordion"> <td>td1</td> <td>td2</td> <td>td3</td> </tr> <tr> <td colspan="3"> <table class="nested" border="1" > <tbody> <tr> <td>nestedtd1</td> </tr> <tr> <td>nestedtd3</td> </tr> </tbody> </table> </body> </html>
use td:first in selector select first td , parent().next() toggle next tr
try this
$(".toptable tr.accordion td:first").click(function(){ //--^^^^^^^^---here $(this).parent().next().fadetoggle(); //----^^^^^^^^^---here }); updated
after comment below
it not not working second row.means if iam clicking on second row first td has show other table row.
try this
$(".toptable tr").find('td:first').click(function(){ $(this).parent().next().fadetoggle(); }); 
Comments
Post a Comment