web-dev-qa-db-ja.com

JavaScriptを使用して非表示のHTMLテーブル行を表示/非表示にする方法（jQueryなし）

編集：これは以下で回答されています。

各行の間に非表示の行があり、最上位の行に関する詳細情報が記載されたHTMLテーブルが必要です。最初の列の画像の展開/折りたたみリンクをクリックすると、非表示の行の表示がdisplay：noneから切り替わります。表示するには：table-row;。私はしばらくJavaScriptを作成しておらず、JavaScriptで厳密にこれを実行できる必要があり、jQueryのtoggle（）メソッドを使用できません。

JavaScriptを使用して、ボタンがテーブル内にあるwith class = "parentRow"のclass = "subRow"の兄弟を見つけて、その兄弟行の表示を切り替えるにはどうすればよいですか？

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";
}
javascripthtmlcsstogglehtml-table
3
Robert

thisを使用してクリックされた行への参照をイベントハンドラーに渡します。

<td><a href="#" onclick="toggleRow(this);"><img alt="Expand row" 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を変更したときにこの関数が壊れないようにするため）。

9
gurch101

これは私のために働いた：

function toggleRow() {
    var row = document.getElementsByClassName("parentRow")[0];
    var next = row.parentNode.rows[ row.rowIndex ];
    next.style.display = next.style.display == "none" ? "table-row" : "none";
}
0
Samuel Cook

クラスの代わりに要素を取得するにはid属性を使用し、それらを区別するためにID内の任意の行に一意の番号を付けます。

<tr style="display: none;" class="subRow" id="subRow1">
.
.
.
<tr style="display: none;" class="subRow" id="subRow2">
.
.
<tr style="display: none;" class="subRow" id="subRow3">
0
Hamid Parchami