编写一个函数，在页面上输出一个N行啊(参数值随便写)的div, div的内容填充当前的行和列，如(第一行第一列)，可以在css里面添加div的宽100高100再加个边框

最新推荐文章于 2024-11-14 17:40:35 发布

whisperE

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量191

点赞数

文章标签： css html css3 javascript

本文链接：https://blog.csdn.net/whisperE/article/details/120918971

版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第十三题</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            display: inline-block;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    13．编写一个函数，在页面上输出一个N行啊(参数值随便写)的div, div的内容填充当前的行和列，
    如(第一行第一列)，可以在css里面添加div的宽100高100再加个边框
    <br>
    <input type="text" name="" id="t1" placeholder="请输入数字,如:1">
    <input type="text" name="" id="t2" placeholder="请输入数字,如:1">
    <button id="btn">创建表格</button>
    <br>
</body>
</html>
<script>
    //用n行m列的div画一个表格  新建dom节点 document.createElement
    //获取某个div行数和列数
    //将获取的行数和列数赋值给div的innerHTML (HTML要大写)
    //将上述功能封装起来 

    //----------------------Bug---------------------------
    //创建出表格之后,再次在input框中输入值时依次向下创建,上次创建的表格还在
    var oText1 = document.getElementById("t1");
    var oText2 = document.getElementById("t2");
    var oBtn = document.getElementById("btn");

    oBtn.onclick = function(){
        tablee(oText1.value,oText2.value);
        oText1.value = "";
        oText2.value = "";
        tablee(oText1.value,oText2.value);
    }

   function tablee(a,b){
        //行
        for(var i=1;i<=a;i++){
            //列
            for(var j=1;j<=b;j++){
                var oDiv = document.createElement('div');
                document.body.appendChild(oDiv);
                oDiv.innerHTML = "第"+i+"行"+"第"+j+"列";
            }
            var oBr = document.createElement('br');
            document.body.appendChild(oBr);
        }
   }
    
    
</script>

在代码里也提到了，创建出表格之后,再次在input框中输入值时依次向下创建,上次创建的表格还在，就像这样：（第一次创建了2x2的）