js如何隐藏表格的行与列

最新推荐文章于 2022-10-19 10:15:00 发布
最新推荐文章于 2022-10-19 10:15:00 发布
阅读量652 收藏
点赞数
文章标签： javascript ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>显示隐藏列 </title>

    <script language="JavaScript">

        function setHiddenCol(oTable, iCol)//Writed by QQ:190988779 at 2007-7-24 11:14:09   
        {
            for (i = 0; i < oTable.rows.length; i++) {
                oTable.rows[i].cells[iCol].style.display = oTable.rows[i].cells[iCol].style.display == "none" ? "block" : "none";
            }
        }
        function setHiddenRow(oTable, iRow)//Writed by QQ:190988779 at 2007-7-24 11:14:09   
        {
            oTable.rows[iRow].style.display = oTable.rows[iRow].style.display == "none" ? "block" : "none";
        }   
  
    </script>

</head>
<body>
    <table id="Table1" cellspacing="1" cellpadding="1" border="1">
        <tr>
            <td width="20%">
                00
            </td>
            <td width="20%" bgcolor="#E3E3E3">
                01
            </td>
            <td width="20%">
                02
            </td>
        </tr>
        <tr>
            <td width="20%" bgcolor="red">
                10
            </td>
            <td width="20%" bgcolor="green">
                11
            </td>
            <td width="20%" bgcolor="red">
                12
            </td>
        </tr>
        <tr>
            <td width="20%">
                20
            </td>
            <td width="20%" bgcolor="#E3E3E3">
                21
            </td>
            <td width="20%">
                22
            </td>
        </tr>
    </table>
    </P>
    <input id="btnHiddenCol" type="button" value="显示/隐藏第2列" name="btnHiddenCol" οnclick="setHiddenCol(document.getElementById('Table1'),1)">
    <input id="btnHiddenRow" type="button" value="显示/隐藏第2行" name="btnHiddenRow" οnclick="setHiddenRow(document.getElementById('Table1'),1)">
</body>
</html>

weixin_33905756
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js动态修改表格行colspan列跨度的方法
10-24
本文将深入探讨如何使用JavaScript动态地修改HTML表格中的行`colspan`属性，从而改变列的跨度。`colspan`属性是HTML `<td>`（表格数据单元格）元素的一个属性，用于指定一个单元格跨越的列数。 在给定的例子中，...
jq实现隐藏和显示table的列——前端笔记
weixin_42128648的博客
03-09 1515
jquery隐藏和显示table的某些列
利用js隐藏表格中的一列（采用一列一列隐藏）
热门推荐
小菜的笔记
01-04 2万+
最近在搞web前端，现在显示表格的时候，想隐藏一列。通过js实现。这里是借助别的网友的文章。这里记录一下。 var table = document.getElementById("tab"); var trs = table.rows; for(var i = 0, len = trs.length; i < len; i++){ var cell = trs[i].c
用Javascript，DHTML控制表格的某一列的显示与隐藏
duansamve的博客
08-31 620
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;me
js 实现隐藏表格列
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-19 5147
js 实现隐藏表格列。动态 渲染列
JS控制表格列的显示隐藏
m0_63446289的博客
06-23 1890
JS控制表格列的显示隐藏
用javascript 控制表格行的展开和隐藏的代码
10-30
用javascript 控制表格行的展开和隐藏的代码 本文档提供了一份使用 JavaScript 控制表格行的展开和隐藏的代码。该代码使用了 JavaScript 语言，并且提供了一个实用的示例代码，展示了如何使用 JavaScript 来控制...
jQuery实现冻结表格行和列
10-24
当表格水平或垂直滚动时，更新冻结行和列的`left`或`top`位置，以保持它们与滚动位置相对应。 3. **处理窗口大小调整事件**： 当浏览器窗口大小发生变化时，需要调整表格的滚动区域宽度和高度。为此，可以监听`...
layui按条件隐藏表格列的实例
10-16
在本文中，我们将深入探讨如何使用layui框架按条件隐藏表格列。layui是一个流行的前端UI框架，它提供了丰富的组件，如表格、表单、分页等，用于构建美观且功能强大的Web应用。在某些情况下，我们可能需要根据特定的...
vue + element 表格内容筛选、表格列展示隐藏
最新发布
05-13
以上就是使用Vue.js和Element UI实现表格内容筛选和表格列展示隐藏的基本方法。在实际项目中，可以根据具体需求进行更复杂的定制，比如添加多列筛选、动态加载列等。在提供的`scoreMaintenance.vue`和`SelectHeader....
js 实现 用JavaScript隐藏或显示表格列
03-31
js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!
js 显示/隐藏某些列
07-26
NULL 博文链接：https://jsufly.iteye.com/blog/650925
js控制隐藏显示table特定列
08-02
js控制隐藏显示table特定列，word文档中有源码实例。
JS-隐藏table中的指定列
咏絮
08-02 3018
/** * table列显示隐藏 * @param tableId * @param columns table列索引 例： 0,1,2,3 * @param type 显示隐藏列 1.显示table列 2.隐藏table列 */ function hideShowTableTd(tableId, columns, type) { var strs = new Array(); //定义一数组 strs = columns.split(","); //字符分割 .
js控制隐藏或显示table的某一行
我的博客
09-11 1249
主要JS如下：（兼容browser: IE9, FireFox, Chrome, 360 safe） var row = document.getElementById(rowID); if (row != null) { if (row.style.display == (document.all ? "block" : "table-row")) { row.style.display = "none"; } else {
js隐藏table 列
zhuyu19911016520
06-30 7457
var tab = document.getElementById("datatable"); function changeTable(tab){       var trs = tab.rows;       for(var i = 0, len = trs.length; i           var cell = trs[i].cells[3];           cell
原生js隐藏table列
王野
08-27 2660
var editable = document.getElementById('editable') //获取表格 function changeTable(editable) { var trs = editable.rows; //获取行 for (var i = 0, len = trs.length;...
js单击显示某一列 隐藏某一列
小远哥的博客
02-21 1985
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "   &lt;html&gt;  &lt;head&gt;   &lt;title&gt; New Document &lt;/title&gt;   &lt;meta name="Generator" content="EditPl
在javascript中如何隐藏table的一列
每天进步一点
07-28 2110
在javascript中如何隐藏table的一列 function displayIncomeCol(col,obj) { var tb; var td; var tr; tb = document.getElementById(''DataTable'');//得到一个table ...
javascript js 删除表格的行、单元列
06-08
要删除表格的行，可以使用以下代码： ```javascript // 获取表格 var table = document.getElementById("table-id"); // 删除第二行 table.deleteRow(1); // 删除最后一行 table.deleteRow(table.rows.length - 1); ``` 要删除表格的单元格列，可以使用以下代码： ```javascript // 获取表格 var table = document.getElementById("table-id"); // 删除第二列 for (var i = 0; i < table.rows.length; i++) { table.rows[i].deleteCell(1); } // 删除最后一列 for (var i = 0; i < table.rows.length; i++) { table.rows[i].deleteCell(table.rows[i].cells.length - 1); } ``` 注意，这些代码只是示例，具体的实现方式可能与你的需求略有不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值