2

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

但是，无论我单击哪一行，此解决方案都只会打开和关闭同一个表行（最上面的行）。我需要帮助才能找到仅展开/折叠我单击的特定行的解决方案。

4

4 回答 4

3

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

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

于 2013-05-10T01:06:01.183 回答
0

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

于 2013-05-10T01:45:00.190 回答
0

我不知道您如何构建视图的内部结构。假设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();
    }

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

于 2013-05-10T05:06:30.313 回答
0

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

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

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

于 2014-09-05T11:22:51.393 回答