如何用JS控制表格的一列显示和隐藏

如图，点击显示/隐藏价格，表格中价格一列显示或隐藏。... 如图，点击显示/隐藏价格，表格中价格一列显示或隐藏。展开

 我来答

2个回答

#热议# 不吃早饭真的会得胆结石吗？

帐号已注销
推荐于2017-09-22 · TA获得超过4630个赞

知道大有可为答主

回答量：1345

采纳率：50%

帮助的人：1634万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	table, tr, td, caption{
		border:1px solid #666;
		border-collapse:collapse;
		background-color:rgb(210, 219, 236);
	}

	td, caption{
		font-family:'微软雅黑';
		font-size:12px;
		text-align:center;
		padding:3px 15px;
	}

	caption{
		border-bottom:none;
		cursor:pointer;
	}
  </style>

  <script type="text/javascript">
	window.onload = function(){
		var tab = document.getElementsByTagName('table')[0];
		tab.caption.onclick = function(){
			var trs = tab.rows;
			for(var i = 0, len = trs.length; i < len; i++){
				var cell = trs[i].cells[1];
				if(cell.style.display == 'none'){
					cell.style.display = '';
				}else{
					cell.style.display = 'none';
				}
			}
		}
	}
  </script>
 </head>

 <body>
  <table>
	<caption>显示/隐藏价格</caption>
	<tr>
		<td>产品</td>
		<td>价格</td>
		<td>销量</td>
	</tr>
	<tr>
		<td>A</td>
		<td>88元</td>
		<td>2</td>
	</tr>
	<tr>
		<td>B</td>
		<td>77元</td>
		<td>3</td>
	</tr>
	<tr>
		<td>C</td>
		<td>66元</td>
		<td>4</td>
	</tr>
  </table>
 </body>
</html>

已赞过 已踩过<

评论收起

武汉市铭利亚网络科技

广告2024-12-18

Office软件是经典的办公软件包含了Excel、Word、PPT等多种组件，支持数据同步云办公，也是电脑办公必备的软件之一

vwps.zabuw.com

百度网友5f8c114
推荐于2017-09-01 · TA获得超过178个赞

知道小有建树答主

回答量：232

采纳率：100%

帮助的人：98.6万

我也去答题访问个人页

关注

展开全部

给价格这一列写id属性()，给显示/隐藏价格写onclick="showorhide(1);"方法。
function showorhide (num){
var a=document.getElementById(""); //写上你价格那列每个单元格的id
var b=document.getElementById("");
var c=document.getElementById("");
var d=document.getElementById("");

if(num==1){
a.style.display="none";
b.style.display="none";
c.style.display="none";
d.style.display="none";
}else{
a.style.display="block";
b.style.display="block";
c.style.display="block";
d.style.display="block";
}
}