Javascript - 使用按钮显示和隐藏表格行

Question

我正在尝试借助按钮显示/隐藏表格行。

使用我现在使用的脚本，我只能制作一个按钮，并且只能显示/隐藏一行。

我想制作更多按钮，每个按钮在按下时都会显示/隐藏一行。我还希望按钮文本在 Info▼ 和 Info▲ 之间切换，就像我的脚本中的第一个一样。

如果我理解正确，我应该使用类而不是 div，但我尝试这样做没有结果。

如果有人可以帮助我编写脚本，以便我可以制作更多按钮，每个按钮在点击时都会显示/隐藏一个独特的行，我将不胜感激。

http://jsbin.com/tovicefu/1/edit 这是我的布局的简单版本。所以当我按下第一个信息按钮时，下面的行应该出现一个图像。

与其他信息按钮相同，但它会在下方显示另一行。

我的脚本。

<script>

    var button_beg = '<button class="button" onclick="showhide()">', button_end = '</button>'; 
    var show_button = 'Info▼', hide_button = 'Info▲';
    function showhide() {
        var div = document.getElementById( "hide_show" );
        var showhide = document.getElementById( "showhide" );
        if ( div.style.display !== "none" ) {
            div.style.display = "none";
            button = show_button;
            showhide.innerHTML = button_beg + button + button_end;
        } else {
            div.style.display = "block";
            button = hide_button;
            showhide.innerHTML = button_beg + button + button_end;
        }
    }
    function setup_button( status ) {
        if ( status == 'show' ) {
            button = hide_button;
        } else {
            button = show_button;
        }
        var showhide = document.getElementById( "showhide" );
        showhide.innerHTML = button_beg + button + button_end;
    }
    window.onload = function () {
        setup_button( 'hide' );
        showhide(); // if setup_button is set to 'show' comment this line
    }
</script>



<table>
<tr>
<td> <div id="showhide"></div></td> 
<td> </td>
<td> </td>
</tr>


<tr>
 <td>   

    <div id="hide_show">

 <img  src="alfagel.gif" height="210" width="120"/>
    </div>
</td>
<td></td>
<td></td>
  </tr>`


<tr>
<td> <div id="showhide"></div></td> 
<td> </td>
<td> </td>
</tr>

<tr>
 <td>   

    <div id="hide_show">

 <img  src="alfagel.gif" height="210" width="120"/>
    </div>
</td>
<td></td>
<td></td>
  </tr>
</table>

Answer 1

您可以结合使用 css 和 javascript。在this jsBin 中，我使用数据属性来识别“可隐藏”行。

CSS：

tr[data-hide="true"] td {
  display: none;
}

Javascript 切换可见性：

function toggleRowvisibility(e) {
  var tbl = document.querySelector('table')
     ,rows = tbl.rows;
  for (var i=0;i<rows.length; i+=1){
    var hidable = rows[i].getAttribute('data-hide');
    if (hidable) {
      rows[i].setAttribute('data-hide', /false/i.test(hidable));
    }
  }
}