I've got a question on how to prepend a table row above the row in which a plus sign image is clicked. If the user hides the row again with the minus image, hide the prepended row too. Ultimately I would like this to display for every record row except the first row.
The table row I want to prepend is: ('<tr><td class="tdhead"><strong>Column 1</strong></td><td class="tdhead"><strong>Column 2</strong></td><td class="tdhead"><strong>Column 3</strong></td><td class="tdhead"><strong>Column 4</strong></td></tr>'); Any help would greatly be appreciated. Working code for the hiding/showing of rows: $(document).ready(function() { var toggleMinus = 'images/minus.gif'; var togglePlus = 'images/plus.gif'; var $subHead = $('tbody.show td.show:first-child'); $("tr.showhide").hide(); $subHead.prepend(' <img src="' + togglePlus + '"/ > '); $('img', $subHead).addClass('clickable') .click(function() { var toggleSrc = $(this).attr('src'); if ( toggleSrc == toggleMinus ) { $(this).attr('src', togglePlus).parents('tr:eq(0)').siblings ().hide(); } else{ $(this).attr('src', toggleMinus).parents('tr:eq(0)').siblings ().show(); }; }); })