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

最新推荐文章于 2023-12-27 14:22:34 发布
最新推荐文章于 2023-12-27 14:22:34 发布
阅读量877 收藏 1
点赞数
分类专栏： 编程心得 文章标签： table javascript function button border ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjiankun880/article/details/6028241
版权

行隐藏：
<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>  

列隐藏：
<!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=&quot;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>   

时间比较忙，就不整理了！需要的人自己整理下，核心的都在上面~~~

小小的坤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap——bootstrapTable实现隐藏列的示例
08-31
在本文中，我们将详细讨论如何在 BootstrapTable 中实现隐藏列的功能。 首先，BootstrapTable 提供了 `showColumn` 和 `hideColumn` 两个方法，用于在运行时动态地显示或隐藏表格中的某一列。例如，在提供的代码...
jquery拖动的table表格的宽度隐藏表格中的内容
12-23
首先，我们需要理解HTML中的`<table>`元素，它是用来展示结构化数据的，通常由行（`<tr>`）和单元格（`<td>`或`<th>`）组成。当用户需要自定义表格列宽时，一个动态的拖动功能就显得尤为重要。 要实现jQuery拖动...
html表格一行的隐藏和显示,使用element-ui中table expand展开行控制显示隐藏，隐藏小箭头列的方法
weixin_51396911的博客
05-10 950
我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。
JS实现鼠标点击展开/隐藏表格行
GoodShot的专栏
11-22 5190
JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)> function TestBlack(TagName){  var obj = document.getElementById(TagName);  if(obj.style.display==""){   obj.style.display = "none";  }else{   obj.style.di
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...
table 表格点击当前行按钮隐藏当前的另一个按钮_Excel 表格的基本操作所有功能键的按键说明...
weixin_39623082的博客
12-14 277
Excel 表格的基本操作所有功能键的按键说明：F1 显示“帮助”任务窗格。按 Ctrl+F1 可关闭并重新打开当前任务窗格。按 Alt+F1 可创建当前范围中数据的图表。按 Alt+Shift+F1 可插入新的工作表。F2 编辑活动单元格并将插入点放在单元格内容的结尾。如果禁止在单元格中进行编辑，它也会将插入点移到编辑栏中。按 Shift+F2 可编辑单元格批注。F3 将定义的名称粘贴到公式中。...
js如何实现点击显示和隐藏表格
weixin_34275734的博客
06-03 815
js如何实现点击显示和隐藏表格 一、总结 一句话总结： 1、给table或者table里面的元素添加点击事件， 2、然后判断当前表格的数据显示或者隐藏， 3、然后通过display属性显示（非none）或者隐藏（值为none）表格中的数据   1、表格的行中如何合并表格的列？ 解答：用colspan属性即可，比如合并三个单元格：colspan="3" 2、js中bool类型的变量...
table 选择隐藏列
03-01
标题“table 选择隐藏列”涉及的是HTML和CSS中关于表格元素显示与隐藏的操作，这在网页设计和前端开发中非常常见。在这个场景下，我们通常会使用JavaScript或者CSS来控制表格中的列是否可见。 首先，让我们理解HTML...
表格插件bootstrapTable中隐藏和显示某列及一些小注意点
☆╮123☆
03-06 2259
html代码： <table id="docDateTable" class="table table-hover table-bordered" style="color: #000000"> <thead style="background-color: white"> <tr> <th data-f...
关于Ant Design Vue 表格中列的自定义隐藏与展示
最新发布
耳火的博客
12-27 3905
在做一个概预算项目的时候，遇到了一个这样的需求：可以把表格中不需要经常展示的字段内容先隐藏掉，等到想看的时候可以随时打开来看，刚开始没有接触过觉得很难的样子，后来通过上网查看，找到一些类似的可用的效果案例，经过一系列的尝试和改变，终于修改成了可以让客户满意的效果。代码如下（示例）： 2.重点提炼，大家可以根据需要按需引用 代码如下（示例）： 总结 以上就是今天要讲的内容，本文仅仅简单介绍了Ant Design Vue 表格中列的自定义隐藏与展示，希望可以帮到你一些。
el-table 列的动态显示与隐藏
一起加油吧~
12-23 1万+
当我们在对表格数据查看的时候，可能某些列的数据是当前想要重点关注的，而某些列并不需要展示出来，我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
jsp的table的显示和隐藏
qq_36457575的博客
06-19 3230
jsp的table的显示和隐藏&lt;script&gt;function show(){ var myTable= document.getElementById("myTable"); myTable.style.display="block";}function hidden(){var myTable= document.getElementById('myTable); myTable....
2021-05-31-element中table表hover显示隐藏表单的实现
qq_31763961的博客
05-31 1099
element中table表hover显示隐藏表单的实现需求： 实现鼠标悬停table中的某一列显示修改按钮，修改按钮跟随内容后间距8px，内容超过16字节显示...加上修改按钮，效果如下图 需求： 实现鼠标悬停table中的某一列显示修改按钮，修改按钮跟随内容后间距8px，内容超过16字节显示…加上修改按钮，效果如下图 #思路： 1、 需要解决鼠标进入列的和离开列的事件控制修改按钮的显示和隐藏， 问题点=>怎样优雅地处理table表中的事件，不用直接操作dom去控制 2、 判断内容的字节数判断跟
vue中控制element表格列的显示与隐藏
weixin_62328829的博客
10-13 6757
思路就是：我们通过vue的监听功能来监听复选框的变化，当复选框发生了变化的时候，我们看对应复选框的选中和未选中的值。选中的为true让对应的列显示、隐藏的为false让对应的列隐藏。当然因为vue是数据的双向绑定的，所以我们就让对应的列的隐藏和表格的隐藏一一对应即可。根据项目需要，需要可以动态控制表格列的显示与隐藏，如下图，复选框选中状态下为显示，为选中状态下为隐藏。
js进行操作table隐藏与显示查询
zuozhiyoulaisam的专栏
11-19 2519
医生评价内容     /*这是概括的是医院科室的评价总数：有医生总数，好评总人数，差评总次数*/     .sfont{         font-size: 12px;         color: #8C8C8C;         text-align: center;     }     .docname{         width:30%;         co
JS控制table显示或隐藏
11-28 1198
script> function show(){  var myTable= document.getElementById("myTable"); myTable.style.display="block"; } function hidden(){ var myTable= document.getElementById('myTable); myTabl
js点击显示隐藏表格
epic2005
03-14 1804
function turn(id){ if(document.getElementById(id).style.display=="") {  document.getElementById(id).style.display="none" } else {  document.getElementById(id).style.display="" }} 调用： 
html表格一行的隐藏和显示,使用element-ui中table expand展开行控制显示隐藏，隐藏小箭头列的方法，之展开一行内容...
weixin_36105232的博客
06-04 1267
涉及知识点：1、不点击小箭头，点击其他列中的某个按钮展开行内容。2、隐藏小箭头列(既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了)3、只展开一行内容先直接上代码：1 2 3 4 5 6 7 8 9 10 11 查看详情12 13 14 15 16 ...
html用button显示/隐藏表格
qq_61549190的博客
11-07 625
这边还是根据元素id获取,这边需要先获取button中id="button"获取监听器其点击事件,再根据表格中id="content"对内容进行隐藏或者显示。这边效果展示,点击button id="button2"触发点击事件,table 根据 id="content2"显示,其他隐藏。注意的是我这边使用的表格内用button按钮嵌套了隐藏表格,表格有点多,就不一一展示了。这边脚本根据要素id定位,先进行判断是否显示/隐藏表格,在根据情况隐藏/显示表格。这边是一段隐藏表格的写法展示。
HTML表格操作：删除行与列的方法
CSS可以用来改变表格的样式，包括行和列的显示和隐藏。例如，`display:none;`属性可以用于隐藏一个元素，包括`<tr>`或`<td>`。然而，这并不意味着物理删除了这些元素，它们仍然存在于HTML代码中，只是在视觉上不可见...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值