Javascript表格行顯示/隱藏

我創建了一個使用Javascript/Backbone的表格。使用模板來顯示行時，我有一個可見的行，一個隱藏起來。當我點擊某個特定的表格時，我希望它通過顯示位於可見區域下方的隱藏行來「展開」。我也使用循環來創建表，所以所有的行都有相同的類和ID。到目前爲止，我用它來展開和摺疊行：Javascript表格行顯示/隱藏

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

但是這種解決方案只能打開和關閉同一個錶行（最上面的一個），不管我點擊哪一行。我需要幫助才能找到解決方案，只展開/摺疊我點擊的特定行。

來源

2013-05-10 Mati Kowa

請參閱這一個http://stackoverflow.com/a/32474501/3583859 – 2015-09-24 09:22:49

ID 對於頁面必須是唯一的。如果它們不是唯一的，那麼您的JavaScript將只選擇第一個出現，在這種情況下，第一行以「hiddenText」作爲ID。

您將需要通過某種參考來選擇所需的行。因此，可能在創建表的循環中，您可以在行id s中包含增量索引，然後通過該方法選擇合適的行。

來源

2013-05-10 01:06:01 Jace

您的腳本停在具有該ID的第一個元素上，因爲它們不是唯一的。你需要讓你的循環動態創建唯一的ID。爲了達到這個目的，我會使用一個整數計數器變量（var counter）在ID的最後附加一個唯一的數字。然後，我會更改if語句的條件，以便通過類名（而不是ID）獲取（getElementsByClassName（'RowExpand'）），並將它們全部存儲在變量（var hasClassRowExpand）中。在onClick事件中，您可以獲取對您單擊的行的ID的引用，然後循環遍歷hasClassRowExpand中的每個元素。當您點擊包含匹配ID的元素的索引時，請根據其當前狀態來操作display屬性。

來源

2013-05-10 01:45:00

我不知道你如何構建視圖的內部。假設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-10 05:06:30 Deeptechtons

謝謝你的回答Deeptechtons！我試圖按照你描述的方式實現它，但沒有任何運氣。你可能會看看完整的JavaScript代碼，並告訴我如何實現你的方法的正確方法？如果是這樣，你會在這裏找到完整的js：http://jsfiddle.net/6xtj5/ – 2013-05-15 00:35:41

http://jsfiddle.net/6xtj5/3/ – 2013-05-15 21:44:20

@MatiKowa不知道如果我的身邊的東西是錯誤的小提琴不運行並導致Js錯誤 – Deeptechtons 2013-05-16 04:13:51

我使用一個CSS類的定義是這樣的方式......

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

...使用JQuery toggleClass翻轉狀態。

來源

2014-09-05 11:22:51

Javascript表格行顯示/隱藏

回答

相關問題