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

如图,点击显示/隐藏价格,表格中价格一列显示或隐藏。... 如图,点击显示/隐藏价格, 表格中价格一列显示或隐藏。 展开
 我来答
帐号已注销
推荐于2017-09-22 · TA获得超过4630个赞
知道大有可为答主
回答量:1345
采纳率:50%
帮助的人:1626万
展开全部
<!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>

 

百度网友5f8c114
推荐于2017-09-01 · TA获得超过178个赞
知道小有建树答主
回答量:232
采纳率:100%
帮助的人:98万
展开全部
给价格这一列写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";
}
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式