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

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

推荐答案推荐于2017-09-22

<!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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/nUpiDpvpvUxD2xviUDi.html

其他回答

第1个回答推荐于2017-09-01

给价格这一列写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";
}
}

相似回答

JQuery或js如何实现隐藏和显示jSF表格的列答：因为 JSF 组件在客户端的 ID 是自动生成的，所以我觉得不要依赖原始的 JSF ID 而是用其它的替代方法，比如用 name 属性或定制的属性，在 Html5 中可以用 data-field 这样的 data- 开头的任意自定义属性。jQuery('[name=selectRstFlag]').hide();jQuery('[name=selectRstFlag]').show();

如何用js控制表格里几列内容的显示与隐藏答：首先下载一个JQuery库,在head中用script标签引入进来.之后要用.每一列对应的td元素设置一个class,例如交易手续费的td列元素设置class="transFee"之类的,能看懂就行.然后在网页底部加一个script标签.或者单独创一个js文件然后引入,建议用后者(代码量大的话方便排版分工)然后写上4个$(".[class名]").h...

用JavaScript如何控制表格中行的显示和隐藏答：document.getElementById("tr的id").style="display:none";隐藏 document.getElementById("tr的id").style="display:block";显示

可以分级的表格隐藏的JS代码怎么写答：【实例描述】分级的表格隐藏是指当用户单击第一行时，第一行后面的行都会隐藏；单击第二行时，则第二行下面的所有行会隐藏，依次类推。 New Page-学无忧（www.xue51.com） <Script Language="javascript"> function trClick(c){ if(c==0){ // 如果选择的是第一行 if (document.all("a1...

javascript怎么隐藏javascript隐藏答：1.首先，让我们创建一个P元素，并在其中写入hello。2.浏览器界面上的显示。3.接下来，使用js隐藏元素。4.看一下浏览器。5.它还没有显示出来。如果必须再次显示，就让它等于block。这就解决了js如何隐藏图片的问题。jsbar怎么隐藏？js设置控件的隐藏与显示的两种方法：js设置控件的隐藏与显示，设置控件...

...标签的文字实现对一个表的隐藏和显示,以前用过js实现久了不用忘了...答：首先给人员管理这个div一个id 然后设置这个表display属性为none 人员管理增加删除修改管理 $(function () { $('#id1').on("click", function () { $('#table1').toggle(); }); //多表格这继续取id }); ...

大家正在搜

表格怎么隐藏行和列表格一列怎么求和表格怎么复制一列表格a列显示不出来表格列求和 excel表格怎样增加一列 word表格增加一列表格竖列怎么求和 word表格怎么增加行和列