backbone.js Javascript表格行显示/隐藏

cl25kdpy  于 2022-11-10  发布在  Java
关注(0)|答案(4)|浏览(153)

我用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';
    }

但是,无论我单击哪一行,此解决方案都只能打开和关闭同一个表行(最上面的一行)。我需要帮助来找到一个解决方案,以便只展开/折叠我单击的特定行。

eiee3dmh

eiee3dmh1#

ID对于页面必须是唯一的。如果它们不是唯一的,那么你的JavaScript将只选择第一个出现的地方,在本例中,第一行的ID为“hiddenText”。
您需要通过某种引用来选择所需的行。因此,也许在创建表的循环中,您可以在行id s中包含一个增量索引,然后通过该方法选择适当的行。

9avjhtql

9avjhtql2#

我不知道您是如何构造视图的内部结构的。

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

上面的代码是用大量的假设编写的,所以它可能是错误的。

wooyq4lh

wooyq4lh3#

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

zf2sa74q

zf2sa74q4#

我使用的CSS类定义如下所示...

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

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

相关问题