使用Javascript類顯示/隱藏表行

Question

我有一個擴展和折疊的表，但使用它太亂了，IE和Firefox無法正常使用它。

那么，這是JavaScript代碼：

  function toggle_it(itemID){ 
      // Toggle visibility between none and '' 
      if ((document.getElementById(itemID).style.display == 'none')) { 
            document.getElementById(itemID).style.display = '' 
            event.preventDefault()
      } else { 
            document.getElementById(itemID).style.display = 'none'; 
            event.preventDefault()
      }    
  } 

和一個示例HTML：

<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Destination</td>
        <td>Updated on</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr1');toggle_it('tr2')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr1" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr2" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr3');toggle_it('tr4')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr3" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr4" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
</table>

問題是我每個人都使用一個ID而且這非常煩人，因為我想為每個父母和很多父母都有很多隱藏的行，所以要處理的ID太多了。 IE和FireFox只顯示第一個隱藏行而不顯示其他隱藏行。 我懷疑這是因為我通過一起觸發所有ID來使其工作。 我認為如果我使用Classes而不是ID來隱藏隱藏的行會更好。

我對這一切都很陌生，所以請嘗試以任何一種簡單的方式解釋它。 我也試過jQuery但是無法得到它。

Answer 1

很難弄清楚你試圖用這個樣本做什么，但你實際上正在考慮使用類。 我已經創建了一個JSFiddle來幫助演示一個稍微好一點的方法（我希望）。

這是小提琴： 鏈接 。

你所做的不是使用ID，而是使用類。 在您的代碼示例中，有橘子和蘋果。 我把它們視為產品類別（因為我真的不知道你的目的是什么），用它們自己的ID。 所以，我用class="cat1"或class="cat2"標記產品<tr> s。

我還用一個簡單的.toggler類來標記鏈接。 在元素本身上使用onclick屬性並不是一種好習慣。 您應該使用JavaScript在頁面加載上“綁定”事件。 我使用jQuery做到這一點。

$(".toggler").click(function(e){
    // you handle the event here
});

使用此格式，您將事件處理程序綁定到具有類toggler的鏈接的click事件。 在我的代碼中，我向toggler鏈接添加了一個data-prod-cat屬性，以指定它們應該控制哪些產品行。 （我在這里解釋了使用data-*屬性的原因。您可以使用Google的'html5數據屬性'獲取更多信息。）

在事件處理程序中，我這樣做：

$('.cat'+$(this).attr('data-prod-cat')).toggle();

有了這段代碼，我實際上是想創建一個像$('.cat1')這樣的選擇器，這樣我就可以為特定的產品類別選擇行，並改變它們的可見性。 我使用$(this).attr('data-prod-cat')來訪問用戶點擊的鏈接的data-prod-cat屬性。 我使用jQuery 切換功能，這樣我就不必編寫像是if visible, then hide element, else make it visible邏輯if visible, then hide element, else make it visible就像在JS代碼中那樣if visible, then hide element, else make it visible 。 jQuery處理它。 切換功能執行它所說的內容並toggle指定元素的可見性。

我希望這足夠解釋。

Answer 2

那么一種方法是將一個類放在“父”行上並刪除所有id和內聯onclick屬性：

<table id="products">
    <thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Destination</th>
        <th>Updated on</th>
    </tr>
    </thead>
    <tbody>
    <tr class="parent">
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    ...etc.
    </tbody>
</table>

然后有一些隱藏所有非父母的CSS：

tbody tr {
    display : none;          // default is hidden
}
tr.parent {
    display : table-row;     // parents are shown
}
tr.open {
    display : table-row;     // class to be given to "open" child rows
}

這大大簡化了你的HTML。 請注意，我已將<thead>和<tbody>到標記中，以便輕松隱藏數據行並忽略標題行。

使用jQuery，您可以簡單地執行此操作：

// when an anchor in the table is clicked
$("#products").on("click","a",function(e) {
    // prevent default behaviour
    e.preventDefault();
    // find all the following TR elements up to the next "parent"
    // and toggle their "open" class
    $(this).closest("tr").nextUntil(".parent").toggleClass("open");
});

演示： http ： //jsfiddle.net/CBLWS/1/

或者，在純JavaScript中實現類似的東西，可能類似於以下內容：

document.getElementById("products").addEventListener("click", function(e) {
    // if clicked item is an anchor
    if (e.target.tagName === "A") {
        e.preventDefault();
        // get reference to anchor's parent TR
        var row = e.target.parentNode.parentNode;
        // loop through all of the following TRs until the next parent is found
        while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
            toggle_it(row);
    }
});

function nextTr(row) {
    // find next sibling that is an element (skip text nodes, etc.)
    while ((row = row.nextSibling) && row.nodeType != 1);
    return row;
}

function toggle_it(item){ 
     if (/\bopen\b/.test(item.className))       // if item already has the class
         item.className = item.className.replace(/\bopen\b/," "); // remove it
     else                                       // otherwise
         item.className += " open";             // add it
}

演示： http ： //jsfiddle.net/CBLWS/

無論哪種方式，將JavaScript放在正文末尾的<script>元素中，以便在解析表之后運行它。

Answer 3

JQuery 10.1.2有一個很好的show和hide函數，它們封裝了你所談論的行為。 這將節省您必須編寫新函數或跟蹤css類。

$("tr1").show();

$("tr1").hide();

w3cSchool鏈接到JQuery show和hide

Answer 4

event.preventDefault()

不適用於所有瀏覽器。 相反，您可以在OnClick事件中返回false。

onClick="toggle_it('tr1');toggle_it('tr2'); return false;">

不確定這是不是最好的方法，但我在IE，FF和Chrome中測試過它的工作正常。

Answer 5

下面是我的腳本，顯示/隱藏id為“agencyrow”的表格行。

<script type="text/javascript">

                        function showhiderow() {
                            if (document.getElementById("<%=RadioButton1.ClientID %>").checked == true) {

                                document.getElementById("agencyrow").style.display = '';
                            } else {

                                document.getElementById("agencyrow").style.display = 'none';
                            }


                        }
    </script> 

只需在radiobutton onClick事件上調用函數showhiderow()

Answer 6

AngularJS指令ng-show，ng-hide允許顯示和隱藏行：

   <tr ng-show="rw.isExpanded">
   </tr>

當rw.isExpanded == true時會顯示一行，當rw.isExpanded == false時會隱藏。 ng-hide執行相同的任務但需要反向條件。