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。 在此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));
    }
  }
}