如何用js控制表格里几列内容的显示与隐藏
要求默认情况下前面的几列隐藏，只显示手续费一列，点击三角展开前面几列，我是刚接触这行的，不太懂，看了好多这方面的，都不弄，求各位大神支招，最好有直接的代码可以用，感激不尽~
单行隐藏倒是很好做...
首先下载一个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的,上面的代码可能没用追问
首先下载一个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的,上面的代码可能没用追问
有的，有邮箱吗，发给你看
温馨提示：答案为网友推荐，仅供参考
第1个回答 2015-07-14
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>test table</title>
<style>
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="display: none;">Data1</td>
<td style="display: none;">Data2</td>
<td>Data6</td>
<td>Data5</td>
</tr>
<tr>
<td style="display: none;">Data3</td>
<td style="display: none;">Data4</td>
<td>Data4</td>
<td>Data3</td>
</tr>
<tr>
<td style="display: none;">Data5</td>
<td style="display: none;">Data6</td>
<td>Data2</td>
<td>Data1</td>
</tr>
<tr>
<td style="display: none;">Data7</td>
<td style="display: none;">Data8</td>
<td>Data9</td>
<td>Data0</td>
</tr>
</table>
<button id="showhide">显示隐藏</button>
<script>
var table = document.getElementsByTagName('table').item(0),
tr = table.getElementsByTagName('tr'),
trlen = tr.length,
btn = document.getElementById('showhide'),
show = false;
btn.addEventListener('click',function(){
if(show == false){
show = true;
toggletd('show');
}else{
show = false;
toggletd('hide');
}
},false);
function toggletd(istrue){
var way = '';
if(istrue == 'show'){
way = 'inline';
}else{
way = 'none';
}
for(var i = 0; i < trlen; i++){
tr.item(i).getElementsByTagName('td').item(0).style.display = way;
tr.item(i).getElementsByTagName('td').item(1).style.display = way;
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8"/>
<title>test table</title>
<style>
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="display: none;">Data1</td>
<td style="display: none;">Data2</td>
<td>Data6</td>
<td>Data5</td>
</tr>
<tr>
<td style="display: none;">Data3</td>
<td style="display: none;">Data4</td>
<td>Data4</td>
<td>Data3</td>
</tr>
<tr>
<td style="display: none;">Data5</td>
<td style="display: none;">Data6</td>
<td>Data2</td>
<td>Data1</td>
</tr>
<tr>
<td style="display: none;">Data7</td>
<td style="display: none;">Data8</td>
<td>Data9</td>
<td>Data0</td>
</tr>
</table>
<button id="showhide">显示隐藏</button>
<script>
var table = document.getElementsByTagName('table').item(0),
tr = table.getElementsByTagName('tr'),
trlen = tr.length,
btn = document.getElementById('showhide'),
show = false;
btn.addEventListener('click',function(){
if(show == false){
show = true;
toggletd('show');
}else{
show = false;
toggletd('hide');
}
},false);
function toggletd(istrue){
var way = '';
if(istrue == 'show'){
way = 'inline';
}else{
way = 'none';
}
for(var i = 0; i < trlen; i++){
tr.item(i).getElementsByTagName('td').item(0).style.display = way;
tr.item(i).getElementsByTagName('td').item(1).style.display = way;
}
}
</script>
</body>
</html>
你要通过循环去让每个单元格隐藏。
如果只是前面几列，还有一种方法比较方便，就看你的取舍了。
就是控制整个表格，在容器中超出的部分隐藏。把整个表格往左移动遮住，
这样也可以实现，只是这种方法并不是真正意义上的隐藏。
追问有邮箱吗？把代码发给你帮我改下呢
追答解决了么？邮箱[email protected]
相似回答