网页中table的行隐藏和列隐藏

最新推荐文章于 2024-01-10 11:57:57 发布
最新推荐文章于 2024-01-10 11:57:57 发布
阅读量7.5k 收藏 1
点赞数
分类专栏： CSS 文章标签： table button javascript function border ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/arthur0088/article/details/5974418
版权

行隐藏：

<BODY>

<TABLE border="1">

<TR>

<TD rowspan=3 width="100">123</TD><TD width="100">456</TD><TD width="100">789</TD>

</TR>

<TR>

<TD>def</TD><TD>ghi</TD>

</TR>

<TR>

<TD>mno</TD><TD>pqr</TD>

</TR>

</TABLE>

<BR>

<SCRIPT LANGUAGE="JavaScript">

function aaa(){

var table = document.all.tags('table')[0];

table.rows[2].style.display ="none";

table.rows[0].cells[0].rowSpan=2;

}



function bbb(){

var table = document.all.tags('table')[0];

table.rows[2].style.display ="";

table.rows[0].cells[0].rowSpan=3;

}

//-->

</SCRIPT>

<button οnclick="with(document.all.tags('table')[0].rows[2].style){display=display==''?'none':''}">test</button>

lt;br>

<button οnclick="aaa()">deleteRow</button>

<button οnclick="bbb()">addRow</button>

<BODY>

<TABLE border="1">

<TR>

<TD rowspan=3 width="100">123</TD><TD width="100">456</TD><TD width="100">789</TD>

</TR>

<TR>

<TD>def</TD><TD>ghi</TD>

</TR>

<TR>

<TD>mno</TD><TD>pqr</TD>

</TR>

</TABLE>

<BR>

<SCRIPT LANGUAGE="JavaScript">

function aaa(){

var table = document.all.tags('table')[0];

table.rows[2].style.display ="none";

table.rows[0].cells[0].rowSpan=2;

}



function bbb(){

var table = document.all.tags('table')[0];

table.rows[2].style.display ="";

table.rows[0].cells[0].rowSpan=3;

}

//-->

</SCRIPT>

<button οnclick="with(document.all.tags('table')[0].rows[2].style){display=display==''?'none':''}">test</button>

<br>

<button οnclick="aaa()">deleteRow</button>

<button οnclick="bbb()">addRow</button>列隐藏：

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<title>Untitled Document</title>

</head>



<body>

<form id="MYFORM" name="MYFORM">

<script language="javascript">

function btnOnclick() {

var table = document.getElementById("MYTABLE");

for(i=0; i<table.rows.length; i++) {

td = table.rows[i].cells[3];

with(table.rows[i].cells[4]){

var display = style.display;

if(style.display == ''){

style.display = 'none';

td.width = "40%"

} else {

style.display = '';

td.width = "20%"

}

}

}

}

</script>

<table id="MYTABLE" name="MYTABLE" bordercolor="#000000" border="1" style="border-collapse:collapse" width="500px">

<TR>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 商品 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 単価 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 規格 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 単位 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 類別 </FONT> </TD>

</TR>

<TR>

<TD width= "20% "> aa </TD>

<TD width= "20% "> 1.00 </TD>

<TD width= "20% "> guige1 </TD>

<TD width= "20% "> 個 </TD>

<TD width= "20% "> 食品 </TD>

</TR>

<TR>

<TD width= "20% "> bb </TD>

<TD width= "20% "> 1.50 </TD>

<TD width= "20% "> guige2 </TD>

<TD width= "20% "> 台 </TD>

<TD width= "20% "> 果物 </TD>

</TR>

<TR>

<TD width= "20% "> cc </TD>

<TD width= "20% "> 1.00 </TD>

<TD width= "20% "> guige3 </TD>

<TD width= "20% "> 人 </TD>

<TD width= "20% "> 野菜 </TD>

</TR>

</table>

<br>

<input type="button" value="TEST" οnclick="btnOnclick()" >

</form>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<title>Untitled Document</title>

</head>



<body>

<form id="MYFORM" name="MYFORM">

<script language="javascript">

function btnOnclick() {

var table = document.getElementById("MYTABLE");

for(i=0; i<table.rows.length; i++) {

td = table.rows[i].cells[3];

with(table.rows[i].cells[4]){

var display = style.display;

if(style.display == ''){

style.display = 'none';

td.width = "40%"

} else {

style.display = '';

td.width = "20%"

}

}

}

}

</script>

<table id="MYTABLE" name="MYTABLE" bordercolor="#000000" border="1" style="border-collapse:collapse" width="500px">

<TR>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 商品 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 単価 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 規格 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 単位 </FONT> </TD>

<TD width= "20% "> <FONT face= "MS UI Gothic "> 類別 </FONT> </TD>

</TR>

<TR>

<TD width= "20% "> aa </TD>

<TD width= "20% "> 1.00 </TD>

<TD width= "20% "> guige1 </TD>

<TD width= "20% "> 個 </TD>

<TD width= "20% "> 食品 </TD>

</TR>

<TR>

<TD width= "20% "> bb </TD>

<TD width= "20% "> 1.50 </TD>

<TD width= "20% "> guige2 </TD>

<TD width= "20% "> 台 </TD>

<TD width= "20% "> 果物 </TD>

</TR>

<TR>

<TD width= "20% "> cc </TD>

<TD width= "20% "> 1.00 </TD>

<TD width= "20% "> guige3 </TD>

<TD width= "20% "> 人 </TD>

<TD width= "20% "> 野菜 </TD>

</TR>

</table>

<br>

<input type="button" value="TEST" οnclick="btnOnclick()" >

</form>

</body>

</html>

Arthur0088
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页表格分割线去除方法
09-28
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就...
网页表格的制作技巧
09-22
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就...
JS生成表格，合并单元格
weixin_33809981的博客
01-29 239
在网上找了这么多都没有JS生成表格然后JS操作合并单元格的，或者是别人写的太负责了，又不想去理解，所以就自己动手写了个简单点的。 其实代码也不多，思路清晰就基本上可以了。一开始的时候是被colspan蒙了，因为要注意大小写才可以的。看下代码， <html><head><scripttype="text/javascript"&...
html隐藏表格的列,浅谈layui数据表格隐藏列的方法
weixin_39745013的博客
06-03 255
在使用layui做数据表格的时候我们会遇到需要隐藏表格列的情况，那么我们该如何使用layui实现表格列隐藏的效果呢？本文就来为大家介绍一下layui数据表格隐藏列的方法，希望对大家有一定的帮助。在使用layui做数据表格的时候，插入的数据的id是不是一组连续的数字，那么就需要用到layui的cols的type属性。table.render({elem: '#test',url:'${pageCon...
antd中实现隐藏某一列数据
热门推荐
qq_41994014的博客
05-06 2万+
在工作中我们可能会有这样需求，比如在课程管理中可能会存在相同名字的老师名字，这个时候如果再靠以前的查询数据后遍历数组是不可取的。这个时候我便可以利用教师编号唯一性的特点。 antd中每一列数据都有唯一性，那么我就需要根据自己的需求来改善代码。 1，先配置教师编号列，通过className设置样式将其隐藏 js代码： this.columns = [ ...
Ant Design Table columns 参数配置隐藏单项列方法
最新发布
JoKerZ517的博客
01-10 719
【代码】Ant Design Table columns 参数配置隐藏单项列方法。
div+css table布局实现代码
01-21
实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 其实有个简单的方法，使用display:table, display:...
bootstrap table 扩展表 v1.18.1
12-28
特征：为Twitter Bootstrap创建（支持所有版本）响应式网页设计具有固定标题的可滚动表完全可配置通过数据属性显示/隐藏列显示/隐藏标题显示/隐藏页脚使用AJAX获取JSON格式的数据单击即可进行简单的列排序格式栏单行...
css布局实例:网页布局的方法
12-09
实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 其实有个简单的方法，使用display:table, display:...
javascript里的document.all用法收集
weixin_33697898的博客
04-21 208
javascript里的document.all用法 从IE4开始IE的object model才增加了document.all[],来看看document.all[]的Description:Array of all HTML tags in the document.Collection of all elements contained by the object...
table的行和列的隐藏和显示
The Home Of Salt Fish
10-12 1万+
今天偶然发现表格隐藏行和列挺好用的，觉得还不错，下面是隐藏和显示table行、隐藏table列（显示的类同）的js函数，直接调用这些函数就可以实现表格行和列的显示和隐藏。 1.显示行 function setShowRow(oTable,iRow){     oTable.rows[iRow].style.display = oTable.rows[iRow].style.display = "b...
element-table 隐藏某几行
Haines
11-15 3387
element-table 隐藏某几行
antd Table表格隐藏某一列
weixin_45663264的博客
06-08 1万+
Table表格 删除 隐藏某列
antd表格隐藏某一列
tao__f的博客
10-25 3155
设置 hideInTable: true
table表格------一行隐藏和显示
dawangchen的博客
09-12 5102
这个功能是table原生js操作一行表
table基础学习-行列布局和滚动条隐藏
qq_53145332的博客
08-27 1610
可视化类型页面制作心得----table table 表格类型的数据 ​ 要写可视化很少会少得了表格的参与，第一次写云子可视化的时候就直接用div堆了一个表格出来，效果不尽人意 … 一．表格元素总汇 表格的基本构成最少需要三个元素：、、，其他的一些作为可选辅 助存在。 也是最常用的三个元素 元素名称 说明 table 表示表格 thead 表示标题行 tbody 表示表格主体 tfoot 表示表脚 tr 表示一行单元格 th 表示标题行单元格 td 表
table表头th太多根据需要显示和隐藏
ThiagoSilva的博客
12-17 2426
table表头th太多根据需要显示和隐藏
jQuery实现html的table表的th和td标签的显示和隐藏
qq_41353397的博客
07-13 4801
html代码 <th class="th_name">name</th> <td class="td_name">张三</td> js代码 $("th.th_hello").hide(); // 隐藏th $("th.th_hello").show(); // 显示th $("td.td_hello").hide(); // 隐藏td $("td.td_hello").show(); // 显示td ...
用HTML 5编写一个网页表格可实现输入和筛选
06-11
接下来，我们可以编写一个名为 `searchTable()` 的 JavaScript 函数，该函数在点击“搜索”按钮时将搜索输入框中的文本与表格中的内容进行比较并隐藏不匹配的行。以下是 `searchTable()` 函数的代码： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值