Question

我有一张大桌子，大部分参赛作品都是＆＃34;显示：无＆＃34;。当用户单击实体时，行应该出现，直到同一个类发生。

表格如下所示：

<tbody>
    <tr id="1" class="department"></tr>
    <tr style="display:none;" id="43" class="sub"></tr>
    <tr style="display:none;" id="55" class="sub"></tr>
    <tr style="display:none;" id="85" class="sub"></tr>
    <tr id="6" class="department"></tr>
    <tr style="display:none;" id="150" class="sub"></tr>
</tbody>

因此，通过点击id = 1行，表格应展开以显示id = 43,45,85（直到达到class =＆＃34; department＆＃34;再次）

我知道这有点令人困惑，如果您需要更多解释，请随时向我提问。

Answer 1

在普通的javascript中，您可以执行以下操作：

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}


var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    (function(index) {
        rows[index].addEventListener("click", function(e) {
            for (var i = index + 1; i < rows.length; i++) {
                var row = rows[i];
                if (hasClass(row, "department")) {
                    break;
                }
                row.style.display = "";
            }
        });
    })(i);
}

工作演示：http://jsfiddle.net/jfriend00/Dh3p3/

代码使用闭包来捕获每行的行索引，这样当单击它时，您可以将该索引用于先前捕获的行数组。然后它向下遍历显示行的数组，直到找到具有“department”类的项目。

仅供参考，这会将事件侦听器放在所有行上，因此如果您手动显示其中一个隐藏行，则可以单击它并具有相同的行为。如果您只需要class="department"行上的点击处理程序，则可以轻松修改代码以执行此操作。

这是一个适用于类层次结构的版本。它只会在点击时扩展下一级别的项目：

function hasClass（elem，cls）{ var str =“”+ elem.className +“”; var testCls =“”+ cls +“”; return（str.indexOf（testCls）！= -1）; }

var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
    (function(index) {
        rows[index].addEventListener("click", function(e) {
            // nothing to do if clicking on the last item
            if (index + 1 >= rows.length) {
                return;
            }
            // get class name to stop on
            var clsToStopOn = this.className;
            // get class name to show
            var clsToShow = rows[index + 1].className;
            for (var i = index + 1; i < rows.length; i++) {
                var row = rows[i];
                if (hasClass(row, clsToStopOn)) {
                    break;
                }
                if (hasClass(row, clsToShow)) {
                    row.style.display = "";
                }
            }
        });
    })(i);
}

使用多级演示：http://jsfiddle.net/jfriend00/9HgPt/

javascript获取表中的元素，直到类发生

1 个答案: