jQuery: overriding and restoring attribute values

I am trying to have expandable rows in a data table. Each time I have a "master row", followed by 1 or more "child rows" that are toggled by clicking on the first cell of the master row.

This is my html:

<tbody>
  <tr class="master">
    <th rowspan="3" scope="row" class="toggle">Toggle</th>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="child">
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="c开发者_C百科hild">
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="master">
    <th rowspan="2" scope="row" class="toggle">Toggle</th>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr class="child">
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</tbody>

My jQuery code used to hide the child rows (via the "toggled" css class):

$(document).ready(function(){
  $(".toggle").click(function() {
    $(this).parent().nextUntil("tr.master").toggleClass("toggled");
  });
});

And my CSS:

tr.child {display:none;}
tr.child.toggled {display:table-row;}
th.toggle {cursor:pointer;}

However, because I want this first cell to also span the "child rows", I have to add a "rowspan" attribute to it. But this messes up the table when the child rows are hidden. So what I would like to do is set the "rowspan" attribute value to "1" when the child rows are hidden (default), and restore to its original value when the child rows are visible.

Setting the attribute value to "1" before click seems easy:

$(".toggle").attr("rowspan", "1");

but restoring the value "on click" is something I can't figure out. I'm relatively new to jQuery and not familiar with checking state. Any help would be greatly appreciated!

Solution with dynamically counting the children.

Here you go:

function runTableCollapse()
{
      $(this).parent().nextUntil("tr.master").toggleClass("toggled");
      if ($(this).parent().next("tr.child").is(':hidden'))
      {
          $(this).attr('rowspan', 1);
      }
      else
      {
          $(this).attr('rowspan', ($(this).parent().nextUntil("tr.master").size() + 1));
      }
}

$(document).ready(function(){
    $(".toggle").click(runTableCollapse);

    $('.toggle').each(runTableCollapse);
});

In action: http://jsfiddle.net/yXCVb/

<script>
var row = [];
$(".toggle").each(function( index ) {
    row [index] = parseInt($( this ).attr("rowspan")) + 1;
});
    $(".toggle").attr("rowspan", "1");
    $(".toggle").click(function() {
    var ele = this;
    $(".toggle").each(function( index, element ) {
    if ( element == ele){
    $(ele).parent().nextUntil("tr.master").fadeToggle(1);
    $(ele).attr("rowspan", row [index] - $(ele).attr("rowspan"));
    }
   });
});
</script>

you could use the jquery data object to store your original rowspan value in.

$(".toggle").each(function() {
  var th = $(this);
  th.data("originalRowSpan", th.attr("rowspan"));
});

later on you can read the store value back like this:

$(this).data("originalRowSpan")

This is not very elegant but it works nonetheless: the rowspan attribute has to switch from 3 to 1 to 3 etc., right? So just calculate it by subtracting the current rowspan value from the number 4:

4 - 1 = 3

4 - 3 = 1

Tested here: http://jsfiddle.net/xpABa/

$(document).ready(function(){
  $(".toggle").click(function() {
    $(this).parent().nextUntil("tr.master").toggleClass("toggled");
    $(this).attr("rowspan", 4 - $(this).attr("rowspan"));
  });
});

Good luck!

Edit: I just noticed the second part of the table has only two rows. So instead of the number four, calculate the number of rows ($(this).somethingsomething.size()) and add 1.

I add my solution, storing values with jQuery.data.
EDIT. In the meanwhile I was preparing this reply I see now that Richard already suggested this.
I did a fork of your demo MatejB , nice tool: http://jsfiddle.net/g9G3U/1/

  $(document).ready(function(){

  // for performance, save the jQuery object in a variable
  myToggles = $(".toggle");

  // Store the attribute rowspan in each element with the help of jQuery.data
  myToggles.each(function(){
    jQuery.data(this, "original_rowspan", $(this).attr('rowspan'));
  });


  myToggles.click(function() {
    var tog = $(this).parent().nextUntil("tr.master");

    if (tog.hasClass('toggled')) {
      tog.removeClass('toggled');
      $(this).attr("rowspan","1");
    } else {
      // retrieve the original rowspan stored
      $(this).attr("rowspan", jQuery.data(this, "original_rowspan"));
      tog.addClass('toggled');
    }
  });

  myToggles.attr("rowspan", "1");

});