js代码中对表格隐藏几行和几列的问题

js代码中对表格隐藏几行和几列的问题,第1张

单行隐藏倒是很好做...

首先下载一个JQuery库,在head中用script标签引入进来.之后要用.

每一列对应的td元素设置一个class,例如交易手续费的td列元素设置class="transFee"之类的,能看懂就行.

然后在网页底部加一个script标签.或者单独创一个js文件然后引入,建议用后者(代码量大的话方便排版分工)

然后写上4个$(".[class名]").hide()

class名就分别是前四列的类名了,这个作用是隐藏前面4列所有的元素

三角是一个按钮的话,用他的ID做选择器吧.设置一下id属性

然后$("#[按钮ID]").click(function(){

$(".[class名]").toggle()

})

toggle是切换显示状态,也就是说这个按钮同时做到了展开和收取的功能.

JQuery还是比较有用的,希望能帮到你.

PS:有这个表格的源码么?我不确定这是某个框架的datatable还是单独的加了样式的基础html table 如果是前者的话每次更新数据都要reload的,上面的代码可能没用

JSP中实现对一行表格的隐藏需要通过js控制css实现。

如下例子说明:

<html>

<head>

<script>

function toggle() {

if( document.getElementById("hidethis").style.display=='none' ){

document.getElementById("hidethis").style.display = ''

}else{

document.getElementById("hidethis").style.display = 'none'

}

}

</script>

</head>

<body>

<span onClick="toggle()">toggle</span><br /><br />

<table border="1">

<tr>

<td>Always visible</td>

</tr>

<tr id="hidethis">//这里通过id控制隐藏还是显示该行

<td>Hide this</td>

</tr>

<tr>

<td>Always visible</td>

</tr>

</table>

</body>

</html>

document.getElementById("tr的id").style="display:none"隐藏

document.getElementById("tr的id").style="display:block"显示


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/sjk/9976687.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-03
下一篇2023-05-03

发表评论

登录后才能评论

评论列表(0条)

    保存