首先下载一个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的,上面的代码可能没用
我默认你用的不是古代的浏览器,代码都按现代浏览器的写
let isHidden = falsedocument.querySelector("button").addEventListener("click", () => {
//css选择器选择table下所有tr下的所有第2,3个td。
document.querySelectorAll("table tr td:nth-child(2), table tr td:nth-child(3)").forEach(item => {
e.style.visibility = isHidden ? "visible" : "hidden"
isHidden = !isHidden
})
}, false)
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>信息提示</title>
</head>
<body>
<select id="sel">
<span><option>选项1</option></span>
<span><option>选项2</option></span>
</select>
<span id="con" style="display:none"></span>
<input type="button" value="隐藏" onclick="hide()">
<input type="button" value="显示" onclick="show()">
<script type="text/javascript">
function hide(){
var sel = document.getElementById("sel")
var con = document.getElementById("con")
con.appendChild(sel.options[0])
}
function show(){
var sel = document.getElementById("sel")
var con = document.getElementById("con")
sel.insertBefore(con.childNodes[0], sel.options[0])
}
</script>
</body>
</html>