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('&nbsp;&nbsp;<img src="' + togglePlus + '"/
>&nbsp;&nbsp;');


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

Reply via email to