jquery创建自定义表格

最新推荐文章于 2022-07-19 16:38:43 发布

小小帅下士

最新推荐文章于 2022-07-19 16:38:43 发布

阅读量648

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45216092/article/details/102869474

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

根据自己所输入的宽、高、行、列来指定自己所要创建的表格。
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="WEB-INF/js/jquery-3.1.1.min.js"></script>
    <title>Title</title>
</head>
<body>

    宽:<input type="text" id="w"><br/>
    高:<input type="text" id="h"><br/>
    行:<input type="text" id="c"><br/>
    列:<input type="text" id="r"><br/>
    <input type="button" value="创建表格" id="btn">

<script type="text/javascript">


  document.getElementById("btn").onclick = function() {

      // 获取属性
       var w = document.getElementById("w").value + "px";
       var h = document.getElementById("h").value + "px";
       var c = parseInt(document.getElementById("c").value);
       var r = parseInt(document.getElementById("r").value);

       // 使用dom创建并设置颜色
        var table = document.createElement("table");
        table.setAttribute("width",w);
        table.setAttribute("cellspacing",0);
        table.setAttribute("height",h);
        table.setAttribute("border","1px");

        // 外层是行内层是列
        for (var i = 0; i < c; i++){
            var tr = document.createElement("tr");
            // 隔行变色
            if(i % 2 == 0){
                tr.style.background="red";
            }else{
                tr.style.background="blue";
            }
            for (var j = 0; j < r; j++){
                var td = document.createElement("td");
                tr.appendChild(td);
            };
            table.appendChild(tr);
        }
        // 把table添加到页面中
        document.body.appendChild(table);
    }

</script>
</body>
</html>

小小帅下士

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery创建自定义表格

根据自己所输入的宽、高、行、列来指定自己所要创建的表格。源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="WEB-INF/js/jquery-3.1.1.min.js"></script> ...
复制链接

扫一扫