Javascript隐藏表格单元格按钮单击

Javascript hide table cell on button click

本文关键字：按钮 单击 单元格 表格 隐藏 Javascript      更新时间：2023-09-26

我尝试使用javascript隐藏表格的一个单元格。我只想把整个表的id发送给函数然后使用childNodes属性到达那个单元格。下面是我的代码:

<head>
    <style type="text/css">
        .hiden{
            visibility: hidden;
        }
    </style>
    <script>
        function change(){
            t = document.getElementById('table');
            row = t.node.childNodes[0];
            row.node.childNodes[0].className='hidden'; 
        } 
    </script>
    <title></title>
</head>
<body>
    <button onclick='change()'>Change</button>
    <table id="table">
        <tr>
            <td>Hi</td>
            <td>See you</td>
        </tr>
    </table>
</body>

我试着隐藏"Hi"

我得到:Uncaught TypeError: Cannot read property 'childNodes' of undefined在这条线上:row = t.node.childNodes[0];

更大的目标是只显示4列的较长的表，并显示隐藏使用下一步/上一个按钮。如果你知道一些图书馆这样做，请让我知道。谢谢你的帮助。

首先，您使用document.getElementById('table')获得的node中不可用node;

JSBIN演示

请在更改()中进行必要的更改

     function change() {
        var t = document.getElementById('table');
        var row = t.getElementsByTagName("td")[0];
        row.className='hidden'; 
    }

对于分页，您可以使用jQuery的:lt()和:gt()来实现

在CSS中，你有一个错别字。类名应该是.hidden

访问单元格错误

把你的js改成如下:

function change() {
    t = document.getElementById('table');
    row = t.rows[0];
    row.cells[0].className='hidden'; 
}

它应该工作:示例

另外，请注意您的hidden类拼写错误(漏了一个d)

你可以只用一行:

function change() {
   document.getElementById('table').rows[0].cells[0].className='hidden';         
}

尝试下面的代码，

<style type="text/css">
.hidden{
  visibility: hidden;
}
</style>
<script>
function newchange()
{
    var table = document.getElementById("table");
    for (var i = 0, cell; cell = table.cells[i]; i++) {
         //iterate through cells
         //cells would be accessed using the "cell" variable assigned in the for loop
        if(i == 0 || cell.id == 'firstCell'){
        cell.className='hidden';
        }
    }
}
 </script>
 <title></title>
 </head>
 <body>
 <button onclick='newchange()'>Change</button>
 <table id="table">
  <tr>
    <td id="firstCell">Hi</td>
    <td>See you</td>
  </tr>
 </table>
 </body>

循环遍历所有单元格，然后通过使用循环变量计数器(在本例中为'i')或单元格id来控制隐藏或显示哪个单元格。

相关文章：