如何使用JavaScript显示/隐藏隐藏的HTML表格行（无jQuery） [英] How to show/hide hidden HTML table rows using JavaScript (no jQuery)

问题描述

我已经有一个HTML表格，每行之间有隐藏行，其中更多有关顶级行的信息。当点击第一列中的展开/折叠图片链接时，隐藏行的可见性将从display：none;显示：table-row ;.我有一段时间没有编写JavaScript，并且需要能够严格使用JavaScript，并且不能使用jQuery toggle（）方法。

如何使用JavaScript查找带有类class =parentRow的class =subRow的兄弟，即按钮位于表中，然后切换该兄弟行的可见性？
$ b

HTML

 < table风格= 宽度：50％ > 
< caption> Test Table< / caption> 
< thead> 
< tr align =center> 
< th>< span class =offscreen> State Icon< / span>< / th> 
< th>列2< / th> 
< th>列3< th> 
< th>第4栏< / th> 
< th>列5< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr align =centerclass =parentRow> 
< td>< a href =＃onclick =toggleRow（）;>< img alt =展开行height =20px; SRC = expand.png >< / A>< / TD> 
< td>测试单元< / td> 
< td>测试单元< / td> 
< td>测试单元< / td> 
< td>测试单元< / td> 
< / tr> 
< tr style =display：none;类= 子行 > 
< td colspan =5>< p> Lorem ipsum dolor sit amet ...< / p>< / td> 
< / tr> 
 .... 
< / tbody> 
< / table> 
  

CSS

  .offscreen {
 position：absolute;剩余
：-1000px; 
 top：0px; 
 overflow：hidden; 
 width：0; 
} 
 
 .subRow {
 background-color：#CFCFCF; 
 
  

JavaScript

  function toggleRow（）{
 var rows = document.getElementsByClassName（parentRow）。nextSibling; 
 rows.style.display = rows.style.display ==none？ table-row：none; 
} 
  

解决方案

到使用这个点击的行：

 < td> < a href =＃onclick =toggleRow（this）;>< img alt =展开行height =20px; SRC = expand.png >< / A>< / TD> 
  

然后更新您的toggleRow函数，如下所示：

  function toggleRow（e）{
 var subRow = e.parentNode.parentNode.nextElementSibling; 
 subRow.style.display = subRow.style.display ==='none'？ 'table-row'：'none'; 
} 
  

您可能需要考虑创建一个通用函数来向上导航DOM树（所以当你改变你的HTML时，这个函数不会中断）。

Edit: This has been answered below.

I would like to have an HTML table that has hidden rows between each row with more information about the top level rows. When clicking an expand/collapse image link in the first column, the hidden row's visibility will toggle from display:none; to display:table-row;. I have not written JavaScript in a while and need to be able to do this strictly in JavaScript and cannot use the jQuery toggle() method.

How can I use JavaScript to find the sibling with class="subRow" of the with class="parentRow" that the button is located in within the table and then toggle the visibility of that sibling row?

HTML

<table style="width:50%">
    <caption>Test Table</caption>
    <thead>
        <tr align="center">
            <th><span class="offscreen">State Icon</span></th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center" class="parentRow">
            <td><a href="#" onclick="toggleRow();"><img alt="Expand row" height="20px;" src="expand.png"></a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr style="display: none;" class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>
....
    </tbody>
</table>

CSS

.offscreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}

.subRow {
    background-color: #CFCFCF; 
}

JavaScript

function toggleRow() {
    var rows = document.getElementsByClassName("parentRow").nextSibling;
    rows.style.display = rows.style.display == "none" ? "table-row" : "none";
}

解决方案

Pass your event handler a reference to the row that is clicked using this:

<td><a href="#" onclick="toggleRow(this);"><img alt="Expand row" height="20px;" src="expand.png"></a></td>

Then update your toggleRow function as follows:

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';    
}

You may want to consider creating a general-purpose function to navigate up the DOM tree (so that this function won't break when/if you change your HTML).

这篇关于如何使用JavaScript显示/隐藏隐藏的HTML表格行（无jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！