玩具javascript:隐藏table指定列

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


百度知道:如何用JS控制表格的一列显示和隐藏


版权声明:本文为博主原创文章,未经博主允许不得转载。

你可能感兴趣的:(JavaScript,table,隐藏,效果,列)