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

最新推荐文章于 2022-05-23 17:23:41 发布

萨斯范德萨

最新推荐文章于 2022-05-23 17:23:41 发布

阅读量712

点赞数 1

分类专栏：利用js 控制table的属性文章标签： html js

本文链接：https://blog.csdn.net/liu19931221/article/details/12658199

版权

利用js 控制table的属性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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" οnclick="big(); ">选中变大
              <input type="checkbox" id="checkbox2" οnclick="little();">选中变小




       </body>

</html>

萨斯范德萨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用js来通过复选框控制表格的长宽

function big() { var c = document.getElementById("checkbox1"); var t = document.getElementById("table"); if(c.checked)
复制链接

扫一扫

专栏目录