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

Posted 2023-02-16

【中文标题】Javascript - 使用按钮显示和隐藏表格行

【英文标题】：Javascript - show and hide table rows with buttons

【发布时间】：2014-09-26 22:47:50

【问题描述】：

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

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

我想制作更多按钮，每个按钮在按下时都会显示/隐藏一行。我还希望按钮文本在 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"  />
    </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"  />
    </div>
</td>
<td></td>
<td></td>
  </tr>
</table>

【问题讨论】：

也提供您的 HTML 部分。

你会做jsfiddle吗？

我在jsbin中做了一个简单的版本，见上。

【参考方案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));
    
  

【讨论】：

看起来有点像我需要的。但是，如何为每一行添加一个按钮以隐藏？当我单击时，我希望在该按钮内更改文本。现在它说切换行可见性，假设我希望它在单击它时更改为切换行隐藏。我该怎么做？

这些都是你应该自己弄清楚的。我给出的代码只是为了给你一个粗略的想法让你去解决。注意：如果在一行内添加一个按钮，当行隐藏时会发生什么？