javascript Javascript表格行显示/隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16473500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript table row display/hide
提问by Mati Kowa
I have created a table using Javascript/Backbone. While using a template to display the rows I have one visible row and one hidden from the start. When I click on a specific table I want it to 'expand' by showing the hidden row placed under the visible one. I'm also using a loop to create the table so all the rows have the same class and id. So far I used this to expand and collapse the rows:
我使用 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';
}
However this solution only opens and closes the same table row (the top one) no matter which row I click on. I need help to find a solution to only expand/collapse the specific row I click on.
但是，无论我单击哪一行，此解决方案都只会打开和关闭相同的表格行（最上面的行）。我需要帮助才能找到仅展开/折叠我单击的特定行的解决方案。
回答by Jace
IDs must be unique to the page. If they are not unique, then your JavaScript will just select the first occurence, in this case, the first row with "hiddenText" as the ID.
页面的 ID必须是唯一的。如果它们不是唯一的，那么您的 JavaScript 将只选择第一次出现，在这种情况下，即以“hiddenText”作为 ID 的第一行。
You will need to select your desired row via some sort of reference. So, perhaps in the loop that creates the table you can include an incremental index in the row ids, then select the appropriate row via that method.
您需要通过某种参考来选择所需的行。因此，也许在创建表的循环中，您可以在行ids 中包含一个增量索引，然后通过该方法选择适当的行。
回答by Marcus Santodonato
Your script is stopping at the first element with that ID because they are not unique. You need to have your loop dynamically create unique ID's. To achieve this, I would use an integer counter variable (var counter) to append a unique number to the end of the ID. I would then change the condition of your if statement to fetch by the class name instead of the ID (getElementsByClassName('RowExpand')) and store them all in a variable (var hasClassRowExpand). On the onClick event, you can get a reference to the ID for the row you clicked and then loop through each element in hasClassRowExpand. When you hit the index containing the element with the matching ID, manipulate the display property based on its current state.
您的脚本在具有该 ID 的第一个元素处停止，因为它们不是唯一的。您需要让循环动态创建唯一 ID。为了实现这一点，我将使用一个整数计数器变量（var counter）在 ID 的末尾附加一个唯一的数字。然后我将更改 if 语句的条件以通过类名而不是 ID (getElementsByClassName('RowExpand')) 来获取，并将它们全部存储在一个变量中 (var hasClassRowExpand)。在 onClick 事件中，您可以获得对所单击行的 ID 的引用，然后循环遍历 hasClassRowExpand 中的每个元素。当您点击包含具有匹配 ID 的元素的索引时，根据其当前状态操作显示属性。
回答by Deeptechtons
I don't know the internals of how you have constructed the view. Assuming that this.$elis the table that you are interested in below is the code i would write
我不知道您如何构建视图的内部结构。假设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();
}
Above code is written with loads of assumption, so probably it can be wrong. But this is the way you should write your views
上面的代码是用大量假设编写的，所以它可能是错误的。但这是你应该写下你的观点的方式
回答by Steve Hibbert
I use a CSS class definition like this...
我使用这样的 CSS 类定义...
.hiddenRowTrue { display:none; }
.hiddenRowFalse { display:table-row; }
... use JQuery toggleClass to flip the state.
...使用 JQuery toggleClass 翻转状态。
