如何让table隐藏

最新推荐文章于 2024-07-22 12:29:37 发布

江寻千

最新推荐文章于 2024-07-22 12:29:37 发布

阅读量6.5k

点赞数 1

分类专栏： Js

本文链接：https://blog.csdn.net/weixin_44547914/article/details/86709855

版权

Js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>如何让table隐藏</title>
 <style>
 .appad{
 width: 600px;
 height: 200px;
 background: #ddd;
 margin-top: 70px;
 border-radius: .25rem;
 display: none;
}
 .dicount{
 height: 44px;
} 
.revew{
 padding:10px 15px 0 ;
 font-weight: 400;
} 
.btndon{
 padding: 0 15px;
 
}
.vrer{
 padding: 0 5px;
 border-radius: .25rem;
 width: 85px;
}
 .scesd{
 line-height: 60px;
}
 .asred{
 width: 70px;
 height: 30px;
 border-radius: 5px;
 border: 1px solid #007bff;
 background: #007bff;
}
 </style>
</head>
<body>
 <button type="button" class="asred" id="primary">Primary</button>
  <div class="appad" id="cdmsicv">
   <div class="dicount">
    <h3 class="revew">表格</h3>
   </div>
   <div class="btndon">
    <table class="rfsad">
     <tr>
      <th>表头</th>
      <th>表头</th>
      <th>表头</th>
      <th></th>
     </tr>
     <tr>
      <td>内容一
      <select name="" class="vrer">
        <option value="">请选择</option>
        <option value="">项目一</option>
        <option value="">项目二</option>
       </select>
      </td>
      <td>内容二
      <select name="" class="vrer">
        <option value="">请选择</option>
        <option value="">项目一</option>
        <option value="">项目二</option>
       </select>
      </td>
      <td>内容三
      <select name="" class="vrer">
        <option value="">请选择</option>
        <option value="">项目一</option>
        <option value="">项目二</option>
       </select>
      </td>
      <td>内容四
      <select name="" class="vrer">
        <option value="">请选择</option>
        <option value="">项目一</option>
        <option value="">项目二</option>
       </select>
      </td>
     </tr>
    </table>
   <div class="scesd">
     <span>内容五</span>
     <input type="text">
    </div>
    <div class="wdefew">
     <button class="asred" id="ecece"></button>
    </div>
   </div>
  </div>
  
  <script>
   window.onclick=function(){
    var cdmsicv=document.getElementById("cdmsicv");
           var ecece=document.getElementById("ecece");
     primary.onclick=function(){
    cdmsicv.style.display="block";
     };
     ecece.onclick=function(){
      cdmsicv.style.display="none";
     };
    }
  </script>
</body>
</html>