Good day programmers,
Being an amateur, I hunted around and found someone who created a very nice jQuery drop-down table. I found a terrific one...
$("#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");
});
And the CSS...
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:left;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#222222 url(header_bkg.png) repeat-x scroll center left; color:#FFF; padding:3px 8px; text-align:center;}
#report td { background:#111111 none repeat-x scroll top left; color:#000; padding:3px 8px; text-align:center;}
#report tr.odd td { background:#000000 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;}
By itself, it works just fine... you can see the gaming page I use it on at the following link: http://www.mynextbit.com/Pages/Wreckedified/roster.html
I'm trying to figure out a way to make it to where I could drop down maybe 12 or so rows instead of just one to show a bunch of data about one of those characters in the table. I did some digging and thought I could re-write the jQuery using the
nth-child(12n+0)
But couldn't quite pull it off. Am I on the right track at least or is there a more obvious and simple solution?
Have you considered that it might be possible to simply start a new table within your rows so you can keep the existing functionality?
Right now your HTML looks a bit like this:
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>This is your hidden data row</td>
</tr>
</tbody>
</table>
Instead of trying to alter the script so that it hides/shows the next 12 <tr>
tags you could just create a new table inside your hidden data row...
<table>
<thead>
<th>Character</th><th>iLevel</th><th>And your other columns...</th>
</thead>
<tbody>
<tr>
<td>CharacterName (Build)</td><td>559</td><td>other column data...</td>
</tr>
<tr>
<td>
<table>
<tr><td>Hidden data row 1</td></tr>
<tr><td>Hidden data row 2</td></tr>
<tr><td>Hidden data row 3</td></tr>
<tr><td>Hidden data row 4</td></tr>
<tr><td>Hidden data row 5</td></tr>
<tr><td>Hidden data row 6</td></tr>
<tr><td>Hidden data row 7</td></tr>
<tr><td>Hidden data row 8</td></tr>
<tr><td>Hidden data row 9</td></tr>
<tr><td>Hidden data row 10</td></tr>
<tr><td>Hidden data row 11</td></tr>
<tr><td>Hidden data row 12</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
But table are "oldschool" so if you draw a picture of what you want to display we might be able to give you some alternative ways too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.