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));
    }
  }
}

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

1 个答案: