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

标签 javascript css

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

我试着隐藏“嗨”。

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

更大的目标是仅显示 4 列较长的表格并使用下一个/上一个按钮显示隐藏。如果你知道一些图书馆可以做到这一点,请告诉我。 感谢您的帮助。

最佳答案

起初,您使用document.getElementById('table')获取的节点中节点不可用;

JSBIN DEMO

请在change()中进行必要的修改

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

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

在 CSS 中,您有错别字。类名应该是.hidden

关于Javascript在单击按钮时隐藏表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23536640/

相关文章:

html - 当 parent 的 parent 有动画时,为什么我的 iframe 会出错?

javascript - 提取斜线之间的数字

javascript - 不能用字符串数组编写突变

javascript - wordpress页面右侧未使用的大空间

css - div填充可用高度

html - 网站在 Opera 和 Firefox 中不显示

html - last-child 选择器只有在后面没有 div 时才有效

html - Semantic-UI UI 类的使用

javascript - Vue.js,下载后动态显示图像

javascript - 如何在 JavaScript 中停止指定的 TimedLoop