利用js来通过复选框控制表格的长宽

来源：互联网发布：实对称矩阵对角化方法编辑：程序博客网时间：2024/06/08 02:37

<html>
    <body>
       <script type="text/javascript">
              function big()
              {
                 var c = document.getElementById("checkbox1");
                 var t = document.getElementById("table");
                 if(c.checked)
                 {
                       t.style.width=600;
                       t.style.height=200;
                 }
                 else
                    {
                       t.style.width=400;
                       t.style.height=100;
                    }
              }

              function little()
              {
                 var c = document.getElementById("checkbox2");
                 var t = document.getElementById("table");
                 if(c.checked)
                 {
                    t.style.width=200;
                    t.style.height=50;

                    }
                    else
                        {
                           t.style.width=   400;
                           t.style.height=100;
                        }


              }


           </script>


       <body>
           <table border="1" style="width:400px;height:200px" id="table">
               <tr >
                  <th >hello</th>
                  <th>world</th>
                  </tr>
               </table>

           <br>
              <input type="checkbox" id="checkbox1" onclick="big(); ">选中变大
              <input type="checkbox" id="checkbox2" onclick="little();">选中变小




       </body>

</html>