CODEWITHSUNDEEP
javascriptjqueryhtml
Ajay
Ajay

Reputation: 6590

html javascript collapse/expand table rows,child rows

I want to collapse/expand table rows when I click on row. I am adding rows and child rows dynamically by javascript. Here is my screenshot

enter image description here

Here in image you can see two button i.e Add rule and add comments. when I click on add rule it add on parent row. when I select parent row and click on add comment it add child row.

There are 5 rows. First row i.e. cell in row 0 it contains three child rows child row 0,child row 1,child row 2. And in child row 2 it contains it's own child row 3.

Here javascript code to collapse/hide rows

function GetSelectedRow(obj) 
{
    trID = obj.id;
    var SelRow = document.getElementById(trID);
    SelRow.setAttribute("bgcolor", "#808080");
    //return obj.id;
    //alert(trID);

    var children = getChildren($(obj));
    $.each(children, function () {
        $(this).toggle();
    })
}
//---------------- get all child element to collapse-------------
function getChildren($row) {
    var children = [], level = $row.attr('data-id');
    while ($row.next().attr('data-parent') == level) {          
        children.push($row.next());
        $row = $row.next();
    }
    return children;
}

When I click on parent row i.e. cell in row 0 it calls the method GetSelectedRow and collapse all it's child row(child row 0, child row 1, child row 2). But the problem is in sub child rows(child row 3). It is not collapsing. See here is my collapsed image.

enter image description here

Here in image you can see I have selected first row and it collapse all child row but issue in subchild. How can I collapse all the rows including child and sub child?

EDIT Here is my html code

<input type="button" onclick="AddRule()" value="Add Rule" />
<input type="button" onclick="AddComments()" value="Add Comments" />
<table id="myTable" class="collaptable">
    <thead>
        <tr>
            <th>Rule Discription
            </th>

            <th>Primary Module
            </th>

            <th>Model
            </th>

            <th>Shop Call Number
            </th>

            <th>EWR
            </th>

            <th>Suggested Rule Effective Date
            </th>

            <th>Rule Contents
            </th>

            <th>Reason
            </th>

            <th>Rule Note
            </th>

            <th>Level
            </th>

            <th>Children
            </th>
        </tr>
    </thead>
    <tbody id="mybody">
    </tbody>
</table>

jsFiddle Link https://jsfiddle.net/18uxxnuc/

But I am not getting why it is not working there. I have added all code there.

I think I have to use like recursive function.

EDIT

I tried jquery plugin aCollapTable and github I have added this function in my AddComment method. but the issue is, it is adding +/- each time when I add child row. See JsFiddle demo. I don't know why this plugin aCollapTable is not working there.

Upvotes: 1

Views: 1617

Answers (1)

Nageshwari P
Nageshwari P

Reputation: 35

$(document).on('click','tr',function(){

$(this).slideToggle()

})

Upvotes: -1

Related Questions