state - jQuery: overriding and restoring attribute values -

i trying have expandable rows in data table. each time have "master row", followed 1 or more "child rows" toggled clicking on first cell of master row.

this 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="child">     <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 hide child rows (via "toggled" css class):

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

and css:

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

however, because want first cell span "child rows", have add "rowspan" attribute it. messes table when child rows hidden. set "rowspan" attribute value "1" when child rows hidden (default), , restore original value when child rows visible.

setting attribute value "1" before click seems easy:

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

but restoring value "on click" can't figure out. i'm relatively new jquery , not familiar checking state. appreciated!

you use jquery data object store original rowspan value in.

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

later on can read store value this:

$(this).data("originalrowspan")