javascript 控制table表某一列的显示和隐藏？解决方案
日期：2014-05-16 浏览次数：20551 次
javascript 控制table表某一列的显示和隐藏？
在一个页面上有个明细表表，有多列：A、B、C、D、E，显示效果如下：
A B C D E
1 Q Q Q Q
2 W W W W
3 E E E E
我想实现的是给这个页面传递一个参数，比如B，这样在打开这个页面的时候，看到的表格就只显示A、C、D、E,如下：
A C D E
1 Q Q Q
2 W W W
3 E E E
这个功能如何实现
?
------解决方案--------------------
<html>
<script>
function Change()
{
var tb = document.getElementById('tb');
var tr;
var td;
for(var i=0; i<tb.getElementsByTagName("tr").length;i++)
{
tr = tb.getElementsByTagName("tr")[i];
td = tr.childNodes[1];
if(document.all.chkPriceI.checked==false)
{
td.style.display ='none';
}
else
{
td.style.display ='inline';
}
}
}
</script>
<body>
<input id="chkPriceI" onclick="Change()" type="checkbox" />显示/隐藏第二列
<table id="tb">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>1</td>
<td>Q</td>
<td>Q</td>
<td>Q</td>
<td>Q</td>
</tr>
<tr>
<td>2</td>
<td>W</td>
<td>W</td>
<td>W</td>
<td>W</td>
</tr>
<tr>
<td>3</td>
<td>E</td>
<td>E</td>
<td>E</td>
<td>E</td>
</tr>
</table>
</body>
</html>
在一个页面上有个明细表表，有多列：A、B、C、D、E，显示效果如下：
A B C D E
1 Q Q Q Q
2 W W W W
3 E E E E
我想实现的是给这个页面传递一个参数，比如B，这样在打开这个页面的时候，看到的表格就只显示A、C、D、E,如下：
A C D E
1 Q Q Q
2 W W W
3 E E E
这个功能如何实现
?
------解决方案--------------------
<html>
<script>
function Change()
{
var tb = document.getElementById('tb');
var tr;
var td;
for(var i=0; i<tb.getElementsByTagName("tr").length;i++)
{
tr = tb.getElementsByTagName("tr")[i];
td = tr.childNodes[1];
if(document.all.chkPriceI.checked==false)
{
td.style.display ='none';
}
else
{
td.style.display ='inline';
}
}
}
</script>
<body>
<input id="chkPriceI" onclick="Change()" type="checkbox" />显示/隐藏第二列
<table id="tb">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>1</td>
<td>Q</td>
<td>Q</td>
<td>Q</td>
<td>Q</td>
</tr>
<tr>
<td>2</td>
<td>W</td>
<td>W</td>
<td>W</td>
<td>W</td>
</tr>
<tr>
<td>3</td>
<td>E</td>
<td>E</td>
<td>E</td>
<td>E</td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
