This isn't ground breaking, but it shows the power of the prototype.js 1.6. This code closed each row after the header row and I didn't need to provide unique id's for each row on each table! All I did as you'll see below is pass the link that was toggling the collapse and expansion.
function _toggle(a) {
a = $(a);
var trs = a.up('tbody').childElements();
trs.without(trs.first()).invoke('toggle');
a.update(a.innerHTML == "-"?"+":"-");
return false;
}
Event.observe(window, 'load', function() {
$$('a[rel="toggle"]').each(function(a) { _toggle(a);});
});
The table would be rendered something like this. You can see the toggling link. I added a "rel" attribute to be able to identify and collapse all the tables when the page loaded.
<table>
<tbody>
<tr>
<td class="name" colspan="2">
<div><a href="#" onclick="_toggle(this); return false;" rel="toggle">-</a></div>Template Something
</td>
</tr>
</tbody>
</table>
So little code that does so much. But it really isn't that much. It's just that doing this the old way required you to put in so much code with id parsing to get it done. So really it's just the right about of code for the perceived work. I like it!
No comments:
Post a Comment