Question

我使用Javascript / Backbone创建了一个表。使用模板显示行时，我有一个可见行，一个隐藏在开头。当我点击特定的表格时，我希望它通过显示隐藏的行放置在可见的一行下来“展开”。我也使用循环来创建表，所以所有行都具有相同的类和id。到目前为止，我用它来展开和折叠行：

expandRow: function() {
    if (document.getElementById('hiddenText').style.display == 'none' ) {
        document.getElementById('hiddenText').style.display = '';
    }
    else if (document.getElementById('hiddenText').style.display == '') {
        document.getElementById('hiddenText').style.display = 'none';
    }

但是，无论我点击哪一行，此解决方案仅打开和关闭相同的表行（顶部的一行）。我需要帮助才能找到解决方案，只展开/折叠我点击的特定行。

Answer 1

ID 必须是页面唯一的。如果它们不是唯一的，那么您的JavaScript将只选择第一个出现，在这种情况下，第一行以“hiddenText”作为ID。

您需要通过某种参考选择所需的行。因此，也许在创建表的循环中，您可以在行id中包含增量索引，然后通过该方法选择适当的行。

Answer 2

您的脚本在具有该ID的第一个元素处停止，因为它们不是唯一的。您需要让循环动态创建唯一ID。为了实现这一点，我将使用整数计数器变量（var计数器）在ID的末尾附加一个唯一的数字。然后，我会将if语句的条件更改为通过类名而不是ID（getElementsByClassName（'RowExpand'））获取，并将它们全部存储在变量中（var hasClassRowExpand）。在onClick事件上，您可以获得对所单击行的ID的引用，然后遍历hasClassRowExpand中的每个元素。当您点击包含具有匹配ID的元素的索引时，请根据其当前状态操作display属性。

Answer 3

我不知道你如何构建视图的内部结构。假设this.$el是您感兴趣的表，下面是我要编写的代码

expandRow: function() {
    if (this.$el.find("tr:hidden").length) {
        this.$el.find("tr:hidden").attr("display","");
    }
    else{
        $.el.find("tr:not(:hidden)").hide();
    }

上面的代码是用大量的假设写的，所以可能是错的。但这是你应该写你的观点的方式

Answer 4

我使用像这样的CSS类定义......

.hiddenRowTrue { display:none; }
.hiddenRowFalse { display:table-row; }

...使用JQuery toggleClass来翻转状态。

Javascript表行显示/隐藏

4 个答案: