expandable rows

I’m tryign to use the JQuery expandable rows within a page. I’m working on making my data dynamic to popluate the table.

When I show only 1 item, the rows expand and collapse correctly, however, when I show more then 1, only the first row expands and collapses.

Am I missing something in the JQuery or where I’m pulling the data out of?

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

//my data call
   strDisplay =   "<table id='report'><tr> " +
		         		     "<th>Subject</th>" +
		         		     "<th>Comments</th>" +
		         		     "</tr>" + 
		         		     "<tr>" +
				            "<td>" + title + "</td> " +
				            "<td>" + commentsCount + "</td> " +
				            "<td><div class='arrow'></div></td> " +
				            "	</tr> " +
				        "<tr> " +
				         "   <td colspan='5'> " +
				           "     <h4>User Comments</h4> " +
				           "     <ul> " +
				           "         <li>" +  comments + " </li> " +
				            "      </ul>    " +
				           " </td> " +
				        "</tr> " +
				        "</table>" ;


//write out the strDisplay to a DIV tag
   $("#usercomments").append(strDisplay);

if I have

strDisplay += HTML code and data values, only the first row works correctly and everything else shows expanded and I’m unable to collapse them.

any suggestion on what I’m missing?

here is what i’m using

http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/

works fine with static data, just not dynamic

I believe your creating a same table multiple times instead of creating multiple row, check the View Source after render in client side. and make your ur <Table> outside of the loop

<table id='report'> // i mean this line

when I move it outside, nothing renders on teh page, but when i do an alert(strDisplay) i can see all of the HTML code

can you post the output string?

try this, its working fine

       $(document).ready(function(){
		strDisplay =   "<table id='report'><tr> " +
		         		     "<th>Subject</th>" +
		         		     "<th>Comments</th>" +
		         		     "</tr>" + 
		         		     "<tr>" +
				            "<td>" + title + "</td> " +
				            "<td>" + commentsCount + "</td> " +
				            "<td><div class='arrow'></div></td> " +
				            "	</tr> " +
				        "<tr> " +
				         "   <td colspan='5'> " +
				           "     <h4>User Comments</h4> " +
				           "     <ul> " +
				           "         <li>" +  comments + " </li> " +
				            "      </ul>    " +
				           " </td> " +
				        "</tr> " +
				        "</table>" ;
						$("#usercomments").append(strDisplay);
						
            $("#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();
			
        });

Try this , its working fine

 $(document).ready(function(){
		strDisplay =   "<table id='report'><tr> " +
		         		     "<th>Subject</th>" +
		         		     "<th>Comments</th>" +
		         		     "</tr>" + 
		         		     "<tr>" +
				            "<td>" + title + "</td> " +
				            "<td>" + commentsCount + "</td> " +
				            "<td><div class='arrow'></div></td> " +
				            "	</tr> " +
				        "<tr> " +
				         "   <td colspan='5'> " +
				           "     <h4>User Comments</h4> " +
				           "     <ul> " +
				           "         <li>" +  comments + " </li> " +
				            "      </ul>    " +
				           " </td> " +
				        "</tr> " +
				        "</table>" ;
						$("#usercomments").append(strDisplay);
						
            $("#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();
			
        });
		

that is still only showing 1 record,   I have 10 records that I need to show. If I add strDisplay +=, its showing all but only collapsing/expanding the first record

Hi,

This is for multiple row, run the below code and see the result , then you can change however you want

 $(document).ready(function(){
		var strDisplay = "";
		var tableIni =  "<table id='report'> <tr> " +
		         		     "<th>Subject</th>" +
		         		     "<th>Comments</th>" +
		         		     "</tr>" ;
		for(i=0;i<10;i++)
		{
		
		strDisplay = strDisplay + 
		         		     "<tr>" +
				            "<td>" + "title"  + "</td> " +
				            "<td>" + "commentsCount" + "</td> " +
				            "<td><div class='arrow'></div></td> " +
				            "	</tr> " +
				        "<tr> " +
				         "   <td colspan='5'> " +
				           "     <h4>User Comments</h4> " +
				           "     <ul> " +
				           "         <li>" +  "comments"  + " </li> " +
				            "      </ul>    " +
				           " </td> " +
				        "</tr> ";
		}
		
				         
		strDisplay = tableIni + strDisplay + "</table>"
		
						$("#usercomments").append(strDisplay);
						
            $("#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();
			
        });
		

im missing something, cause this shows it over and over again and then crashes the web page.

 

 

then do step by step, if possible post all your code , ill look into it, i tested the code which i posted it works well

I’m breaking it down step by step and this code;

var strTable = "<table id='report'> " +
						  " <th>Subject</th>" +
						  "<th>Comments</th>";
						  
			strDisplay += "<tr>" +
						 "<td>" + title + "</td></tr></table>";
						  
			strDisplay = strTable + strDisplay;

produces this:

 

Subject Comments

Subject Comments

Subject Comments

Subject Comments

Subject Comments

Subject Comments

Subject Comments

Subject Comments

Subject Comments

Subject Comments

comment1comment2comment2commnet4comment5commnet6commnet7 and so on

here is the HTML to show

<div id="discussions"></div> //show the comments table

Hi csharpcode,

For your issue ,I wrote a demo for you.

In  my table ,I have more than one row in my table. please refer to the code below:

<!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 () {
            strDisplay = "<table id='report'><tr> " +
		         		     "<th>Subject</th>" +
		         		     "<th>Comments</th>" +
		         		     "</tr>" +
		         		     "<tr>" +
				            "<td>" + "title" + "</td> " +
				            "<td>" + "commentsCount"+ "</td> " +
				            "<td><div class='arrow'></div></td> " +
				            "	</tr> " +
				        "<tr> " +
				         "   <td colspan='5'> " +
				           "     <h4>User Comments</h4> " +
				           "     <ul> " +
				           "         <li>" + "comments" + " </li> " +
				            "      </ul>    " +
				           " </td> " +
				        "</tr> " +
                         "<tr>" +
				            "<td>" + "title" + "</td> " +
				            "<td>" + "commentsCount" + "</td> " +
				            "<td><div class='arrow'></div></td> " +
				            "	</tr> " +
				        "<tr> " +
				         "   <td colspan='5'> " +
				           "     <h4>User Comments</h4> " +
				           "     <ul> " +
				           "         <li>" + "comments" + " </li> " +
				            "      </ul>    " +
				           " </td> " +
				        "</tr> " +
				        "</table>";

      
            $("#dd").append(strDisplay);

            $("#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>
    <h1>JankoAtWarpSpeed demos</h1>
    <p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/07/19/Expand-table-rows-with-jQuery-jExpand-plugin.aspx">Expand table rows with jQuery - jExpand plugin</a></p>
    <div id="dd">

    </div>

</body>
</html>

Best Regards,
Kevin Shen.

Leave a Reply