Expand table rows with jQuery

Question

jayhall 0 Newbie Poster

12 Years Ago

Hi All

I found this code online what need, expandable table we have to reserve two rows for each entity, one that will be master row and another that will show details. Details rows are toggled by clicking on master row.

What I am doing is in my table second row i have other table with few rows, I don’t want him to expandable on the table,

How Can I do this? Please advice

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report h4 { margin:0px; padding:0px;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
		
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>        
</head>
<body>
    <table id="report">
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td colspan="4">
           321313212313213131313
         <br />
54454446
        </td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td colspan="4">
            <table width="335" s >
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="love">
    <td>456;</td>
    <td>jayy</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
  
        </td>
    </tr>
</table>

    <em>* Information taken from Wikipedia</em>
</body>
</html>

The code found fr this website http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx

javascript jquery

2 Contributors
1 Reply
2K Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by AleMonteiro

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

AleMonteiro 238 Can I pick my title? · Answer 1 · 2012-03-06T03:22:50+00:00

If I did understand correctly, you want only the rows of the first table to have the expand/collapse functionality. Is that right?

If so, you need to tell JQuery only to get the direct children of the #report table.

To do that, you use the '>' operator. But there is a catch with tables, some browsers(I don't know if all of them) adds a <tbody> inside the table, so you need to do this:

$("#report > tbody > tr:odd")

But just to be sure it will work in all browsers, add manually the <tbody>, so if even the browser don't add it, it will always be there.

Here is the full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report h4 { margin:0px; padding:0px;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report > tbody > tr:odd").addClass("odd");
            $("#report > tbody > tr:not(.odd)").hide();
            $("#report > tbody > tr:first-child").show();
		
            
            $("#report > tbody > tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>        
</head>
<body>
    <table id="report">
		<tbody>
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td colspan="4">
           321313212313213131313
         <br />
54454446
        </td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td colspan="4">
            <table width="335" >
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="love">
    <td>456;</td>
    <td>jayy</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
  
        </td>
    </tr>
	</tbody>
</table>

    <em>* Information taken from Wikipedia</em>
</body>
</html>

Hope it helps.