Question

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 type values in column2, the other columns can’t be modified. You can’t straightly modify values of column2 until you unfold the parent row, because there are many sub rows belonging to parent row,say Car. The values of Name, Model, Code are existing, they are master data, no need to type or modify.

please see the snapshots :

Besides modifying values in sub rows , I need to be able to know which sub rows are modified and values of those rows.Initially the editable columns are blank. And when you click on the minus sign, the sub rows can be folded again,but the modified values won’t be lost,they are still there when unfolded again. One last requirement is it’s cross devices, the code must run well on pc,mobile phone,pad. Is that possible?

Many thanks.

Answer 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><td section-opener=mysection1 section-state=open> SOME HEADER </td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr section-content=mysection1><td>some AAA</td><td>some zaaother text</td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr><td section-opener=anothersection section-state=close> Hu ? </td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
<tr section-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.