Question

我尝试使用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>

我试图隐藏＆＃34;嗨＆＃34;。

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

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

Answer 1

首先，使用document.getElementById('table');

的节点中的节点不可用

JSBIN DEMO

请在更改（）

中进行必要的更改

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

对于分页，你可以使用jQuery：lt（）和：gt（）来实现

在CSS中，你有一个错字。班级名称应为.hidden

Answer 2

您正在访问单元格错误

将您的js更改为以下内容：

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

它应该有效：Example

另外，请注意您拼错了hidden课程（错过了d）

Answer 3

您只能使用一行：

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

Answer 4

尝试以下代码，

<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控制要隐藏或显示的单元格。

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

4 个答案: