HBuilder-行列表单生成器（简易）

最新推荐文章于 2024-05-26 17:07:08 发布

妮可珍郝坎

最新推荐文章于 2024-05-26 17:07:08 发布

阅读量892

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129313339

版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
        th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
    </style>
</head>
<body>
    <label for="">行：</label>
    <input type="text" id="input1">
    <label for="">列：</label>
    <input type="text" id="input2">
    <button id="btn">生成</button>
</body>
<script type="text/javascript">
    var ipt1=document.getElementById('input1');
    var ipt2=document.getElementById('input2');
    var tab;
    document.getElementById('btn').onclick=function(){
        var ip1=parseInt(ipt1.value);
        var ip2=parseInt(ipt2.value);
        if(typeof  tab=='object'){
            document.body.removeChild(tab);
        }
        creat(ip1,ip2);
    };
    function creat(v1,v2){
        tab=document.createElement('table');
        tab.setAttribute("style", "margin: auto");
        tab.setAttribute("with", "30%");
        for(var i=0;i<v1;i++){
            var tr1=tab.insertRow();
            for(var j=0;j<v2;j++){
                tr1.insertCell().innerHTML='1';
            }
        }
        document.body.appendChild(tab);
    }
</script>
</html>

效果如下：