What Jquery Based Table Plugin Can Hide Sub Rows?

I'm in the need to convert excel macros into jquery code, the function is that you need to click on the plus sign to unfold and show the sub rows to modify column2 if you want to t

Solution 1:

You don't need plugins to do that, this is commonly done using a few lines of simple code.

DEMO : http://jsfiddle.net/FHWaw/2/

In this demonstration, I specify on rows and cells an attribute identifying the "section" (the thing which can be opened or closed) :

<table><tr><tdsection-opener=mysection1section-state=open> SOME HEADER </td></tr><trsection-content=mysection1><td>some text</td><td>some other text</td></tr><trsection-content=mysection1><td>some AAA</td><td>some zaaother text</td></tr><trsection-content=mysection1><td>some text</td><td>some other text</td></tr><tr><tdsection-opener=anothersectionsection-state=close> Hu ? </td></tr><trsection-content=anothersection><td>some text</td><td>some other text</td></tr><trsection-content=anothersection><td>some text</td><td>some other text</td></tr></table>
​

(in this sample, the first section is open at first while the second one is open)

Then I have this which, on click, decides to change the class of the rows in order to let them be visible or not :

$('body').on('click', 'td[section-opener]', function() {
    changeState($(this).attr('section-opener'));
});

changeState = function(sectionId, newstate) {
    var $opener = $('td[section-opener="'+sectionId+'"]');
    var oldstate = $opener.attr('section-state');
    if (oldstate==newstate) return newstate;
    newstate = oldstate=='open' ? 'close' : 'open'; // sanitization
    $opener.attr('section-state', newstate);
    $('tr[section-content="'+sectionId+'"]').attr('section-state', newstate);
    return newstate;
};​

And I have a CSS which mainly lets closed section be hidden (and the openers be clearly identifiable) :

td[section-opener] {
    font-weight: bold;
    cursor: pointer;
}
td[section-opener][section-state="close"]:before {
    color: #ccc;
    content: " \25B6  ";
}
td[section-opener][section-state="close"]:hover:before{
    color: #aaa;
    content: " \25B6  ";
}
td[section-opener][section-state="open"]:before {
    content: "\25BC  ";
}
tr[section-content][section-state="close"] {
    display: none;
}
tr[section-content][section-state="open"] {
    display: table-row;
}

​As nothing is never deleted, your edited input won't be lost when closing and then opening again.