时间戳

首页 > 解决方案 > 函数 hideTable() 不会隐藏所有行

javascript - 函数 hideTable() 不会隐藏所有行

问题描述

我试图隐藏或显示特定的表格行，但结果是只隐藏了一个单元格

我在这里做错了什么？

这是调用函数的脚本

<script type="text/javascript">  
 window.onload = function() {
var hideTable = localStorage.getItem('hideTable');
if(hideTable === 'true'){
   document.getElementById('tr1').innerHTML = "";

    }
}     

   function showTable() {
   document.getElementById('tr1').style.visibility = "visible";
   localStorage.removeItem('hideTable');  //remove key   
   }
   function hideTable() {
   document.getElementById('tr1').innerHTML = "";
   localStorage.setItem('hideTable' , true);  //remove key   
   }
   if (localStorage.getItem('hideTable')) {  

   hideTable();   //if set show table
   }

</script>

这里是按钮，

<table>
<tbody>
<tr>
<td><input     type='button' onClick='javascript:showTable();' value='show'></td>
<td><input type='button' onClick='javascript:hideTable();' value='hide'></td>
</tr>

这是我要隐藏或显示的表格

<tr id='tr1'>

<?php for($i=5;$i<(count($csv)-1);$i++) { ?>

<td align="center" <?php colorizeTrades($csv3[$i][0], true); ?>><?php echo $csv3[$i][0]; ?></td>
<td align="center" <?php colorizeTrades($csv3[$i][1], true); ?>><?php echo $csv3[$i][1]; ?></td>
<td align="center" <?php colorizeTrades($csv3[$i][2], true); ?>><?php echo $csv3[$i][2]; ?></td>
<td align="center" <?php colorizeTrades($csv3[$i][3], true); ?>><?php echo $csv3[$i][3]; ?></td>
<td align="center" <?php colorizeTrades($csv3[$i][4], true); ?>><?php echo $csv3[$i][4]; ?></td>
<td BGCOLOR="white"  align="center"><?php echo $csv3[$i][5]; ?></td>
<td BGCOLOR="white"  align="center"><?php echo $csv3[$i][6]; ?></td>
<td BGCOLOR="AntiqueWhite"  align="center"><?php echo $csv3[$i][7]; ?></td>
<td BGCOLOR="AntiqueWhite"  align="center"><?php echo $csv3[$i][8]; ?></td>

</tr>

<?php } ?>
</tbody>
</table>

标签： javascripthtmlhtml-table

解决方案

试试这个，当你想隐藏行时，这可能是你要找的。您需要首先选择该行，然后将其存储在本地存储中，然后将其从表中删除。

当你想再次显示它。您需要从本地存储中获取该行，然后将其添加到表中

function showRow(){
  var row = localStorage.getItem("hiddenRow");
  $("#myTable").prepend(row);
}
function hideRow(){
  var row =$("#tr1");
  localStorage.setItem("hiddenRow", row);
  $(row).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<button onclick="showRow()">show</button>
<button onclick="hideRow()">hide</button>
<table id="myTable">
  <tr id="tr1">
    <td>Hi</td>
    <td>Hello</td>
  </tr>
  
  <tr>
    <td>Hi 1</td>
    <td>Hello 1</td>
  </tr>
</table>

推荐阅读