Javascript 切换 table 行和组元素

Question

我有一个 table 这样的： http://jsfiddle.net/uow54mex/1/ 这是一个非常简单的 table 就像

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

我想按名称自动对所有 table 行进行分组，因此在最左边的列中每个用户应该只显示一次。如果访问者单击某个用户，该行应该展开并且用户 1 的所有条目都应该可见。

我不知道如何使用 Javascript，所以我会接受任何建议。如果它很重要：table 显示在 php 页面中，并动态填充 SQL 查询。

Answer 1

您可以使用 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: [""]
    });
});

两个项目的文档都很齐全

jsFiddle

Answer 2

在 Vanilla JS 中使用更正的 HTML 结构，它会是这样的 (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 切换 table 行和组元素

Javascript toggle table rows and group elements

javascript

html-table

toggle

rows