Javascript toggle table rows and group elements

Question

I have a table like this: http://jsfiddle.net/uow54mex/1/ its a very simple table like

<table>
<thead>
<tr><th>....</...></thead>
<tr><td>....
</table>

I want to automatically group all table rows by name, so in the very left column should be every user only once. If a visitor clicks on a user, the row should expand and all entries of user 1 should be visible.

I have no idea how to work with Javascript, so I'll take any advice. If it is important: the table is shown within a php page and is dynamically filled with an SQL query.

Looks like you need to work on your html as well. That is not a valid table. — kemicofa ghost, Apr 29 '15 at 08:21
http://stackoverflow.com/questions/17192669/html-table-sorting-in-jquery — kemicofa ghost, Apr 29 '15 at 08:28

score 1 · Accepted Answer · answered Apr 29 '15 at 08:42

1

You can use the jQuery.DataTable plugin with the Row Grouping Add-on :

$(document).ready(function () {
    $('#example').dataTable({
        "bLengthChange": false,
        "bPaginate": false,
        "bJQueryUI": true
    }).rowGrouping({
        bExpandableGrouping: true,
        bExpandSingleGroup: false,
        iExpandGroupOffset: -1,
        asExpandedGroups: [""]
    });
});

Documentations of the two projects are very complete.

jsFiddle

answered Apr 29 '15 at 08:42

jmgross

2,306
1
20
24

ok, I loaded query-1.11.1.min.js and jquery.dataTables.min.js. I copied your code snippet and put it in the third – Hans Dampf Apr 29 '15 at 09:41
Did you add the [Row Grouping Add-on](http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js) too ? – jmgross Apr 29 '15 at 09:50
thanks, I havent seen that the plugin needs an addon...everything works, thanks for your patience! – Hans Dampf Apr 29 '15 at 10:04

score 1 · Answer 2 · answered Apr 29 '15 at 09:05

With corrected HTML structure in Vainlla JS it would be something like this (JSFiddle):

var rows = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var groups = [],
    item, itemName;
for (var i = 0, l = rows.length; i < l; i++) {
    item = rows[i].getElementsByTagName('td')[0];
    itemName = item.innerText.trim();
    if (groups.indexOf(itemName) !== -1) {
        addClass(rows[i], 'group-element');
    } else {
        groups.push(itemName);
        addClass(rows[i], 'group-root');
        addClass(rows[i], 'group-element');
        if (item.addEventListener) { // For all major browsers, except IE 8 and earlier
            item.addEventListener("click", toggleGroup);
        } else if (x.attachEvent) { // For IE 8 and earlier versions
            item.attachEvent("onclick", toggleGroup);
        }
    }
}

function toggleGroup(evt) {
    var tr = evt.target.parentNode,
        isVisible = !hasClass(tr, 'group-element');
    do {
        if (tr.nodeType === 1) {
            isVisible ? addClass(tr, 'group-element') : removeClass(tr, 'group-element');
        }
        tr = tr.nextSibling;
    } while (tr && !hasClass(tr, 'group-root'));
}

/* helpers */

// source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement, fromIndex) {

        var k;

        // 1. Let O be the result of calling ToObject passing
        //    the this value as the argument.
        if (this == null) {
            throw new TypeError('"this" is null or not defined');
        }

        var O = Object(this);

        // 2. Let lenValue be the result of calling the Get
        //    internal method of O with the argument "length".
        // 3. Let len be ToUint32(lenValue).
        var len = O.length >>> 0;

        // 4. If len is 0, return -1.
        if (len === 0) {
            return -1;
        }

        // 5. If argument fromIndex was passed let n be
        //    ToInteger(fromIndex); else let n be 0.
        var n = +fromIndex || 0;

        if (Math.abs(n) === Infinity) {
            n = 0;
        }

        // 6. If n >= len, return -1.
        if (n >= len) {
            return -1;
        }

        // 7. If n >= 0, then Let k be n.
        // 8. Else, n<0, Let k be len - abs(n).
        //    If k is less than 0, then let k be 0.
        k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

        // 9. Repeat, while k < len
        while (k < len) {
            // a. Let Pk be ToString(k).
            //   This is implicit for LHS operands of the in operator
            // b. Let kPresent be the result of calling the
            //    HasProperty internal method of O with argument Pk.
            //   This step can be combined with c
            // c. If kPresent is true, then
            //    i.  Let elementK be the result of calling the Get
            //        internal method of O with the argument ToString(k).
            //   ii.  Let same be the result of applying the
            //        Strict Equality Comparison Algorithm to
            //        searchElement and elementK.
            //  iii.  If same is true, return k.
            if (k in O && O[k] === searchElement) {
                return k;
            }
            k++;
        }
        return -1;
    };
}

// source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
    (function () {
        // Make sure we trim BOM and NBSP
        var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
        String.prototype.trim = function () {
            return this.replace(rtrim, '');
        };
    })();
}

// source: http://toddmotto.com/apollo-js-standalone-class-manipulation-api-for-html5-and-legacy-dom/
function hasClass(elem, className) {
    if (elem.classList) {
        return elem.classList.contains(className);
    } else {
        return new RegExp('(^|\\s)' + className + '(\\s|$)').test(elem.className);
    }
}

function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        if (elem.classList) {
            elem.classList.add(className);
        } else {
            elem.className += (elem.className ? ' ' : '') + className;
        }
    }
}

function removeClass(elem, className) {
    if (hasClass(elem, className)) {
        if (elem.classList) {
            elem.classList.remove(className);
        } else {
            elem.className = elem.className.replace(new RegExp('(^|\\s)*' + className + '(\\s|$)*', 'g'), '');
        }
    }
}

/* example code */

var rows = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var groups = [],
    item, itemName;
for (var i = 0, l = rows.length; i < l; i++) {
    item = rows[i].getElementsByTagName('td')[0];
    itemName = item.innerText.trim();
    if (groups.indexOf(itemName) !== -1) {
        addClass(rows[i], 'group-element');
    } else {
        groups.push(itemName);
        addClass(rows[i], 'group-root');
        addClass(rows[i], 'group-element');
        if (item.addEventListener) { // For all major browsers, except IE 8 and earlier
            item.addEventListener("click", toggleGroup);
        } else if (x.attachEvent) { // For IE 8 and earlier versions
            item.attachEvent("onclick", toggleGroup);
        }
    }
}

function toggleGroup(evt) {
    var tr = evt.target.parentNode,
        isVisible = !hasClass(tr, 'group-element');
    do {
        if (tr.nodeType === 1) {
            isVisible ? addClass(tr, 'group-element') : removeClass(tr, 'group-element');
        }
        tr = tr.nextSibling;
    } while (tr && !hasClass(tr, 'group-root'));
}

.group-element {
    display: none;
}
.visible-row, .group-root {
    display: table-row;
}

<table>
    <thead>
        <tr>
            <th>Users</th>
            <th>Day</th>
            <th>Hours</th>
            <th>Desc</th>
            <th>Department</th>
            <th>Task</th>
            <th>Subtask</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>user 1</td>
            <td>2015-02-11 13:05:00</td>
            <td>2.0</td>
            <td>blabla</td>
            <td>Standard</td>
            <td>testing</td>
            <td>testen</td>
        </tr>
        <tr>
            <td>user 1</td>
            <td>2015-03-11 13:05:00</td>
            <td>1.0</td>
            <td>blbla</td>
            <td>Standard</td>
            <td>making coffee</td>
            <td>get milk</td>
        </tr>
        <tr>
            <td>peter</td>
            <td>2015-03-11 13:05:00</td>
            <td>1.0</td>
            <td>padsfs</td>
            <td>something</td>
            <td>PB</td>
            <td>test</td>
        </tr>
    </tbody>
</table>

Javascript toggle table rows and group elements

2 Answers2