HTML自定义行列表格添加功能

All_thebest

于 2022-04-01 14:16:07 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： java

本文链接：https://blog.youkuaiyun.com/All_thebest/article/details/123896789

这段代码展示了一个HTML页面，当用户输入行数和列数后，通过点击按钮，利用jQuery动态生成相应行列的表格。表格具有边框，固定宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>

   </head>
   <body>

       行：<input id="hang" /><br />
       列：<input id="lie" /><br />
       <div id="div"></div>
       <button id="table">创建表格</button><br />

       <script>

           $("#table").click(function(){
               var h = $("#hang").val();
               var l = $("#lie").val();
               var table = $("<table border='1px' width='500px' height='200px'></table>")
               for (var i = 0; i < h; i++) {
                   var tr = $("<tr></tr>")
                   for (var j = 0; j < l; j++) {
                       var td = $("<td></td>")
                       $(tr).append(td)
                   }
                   $(table).append(tr)
               }
               $("div").append(table)
           })

       </script>

   </body>
</html>