Javascript表行显示/隐藏

我已经使用Javascript/主干创建了一个表。在使用模板显示行时，我从一开始就有一个可见行和一个隐藏行。当我点击一个特定的表格时，我希望它通过显示隐藏在可见表格下的行来“展开”。我还使用循环来创建表，以便所有行都具有相同的类和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';
    }

---

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

IDs必须是页面所独有的。如果它们不是唯一的，那么您的JavaScript将只选择第一个出现，在本例中，第一行的ID为“hiddenText”

---

您需要通过某种引用选择所需的行。因此，也许在创建表的循环中，您可以在行

id

s中包含一个增量索引，然后通过该方法选择适当的行。

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

我不知道如何构建视图的内部结构。假设

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();
    }

---

上面的代码是用大量的假设编写的，所以可能是错误的。但这是您编写视图的方式

我使用的CSS类定义如下

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

---

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

感谢您的回答！我试着按照你描述的方式来实现它，但没有任何运气。你能看一下完整的javascript代码并告诉我如何实现你的方法吗？如果是这样的话，你会在这里找到完整的js:@MatiKowa不知道我这边是否有什么问题，小提琴没有运行，导致js错误转发这个