JavaScript强化教程-动态实现创建row行col列的表格

最新推荐文章于 2022-07-22 08:26:59 发布

wdapp

最新推荐文章于 2022-07-22 08:26:59 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/wanda000/article/details/51604842

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

点击获取更多JavaScript强化教程

通过用户输入行列数，动态创建表格

<!DOCTYPE html>

<body>

创建文本输入框，接受用户输入的行列数并且创建table id="ta"便于添加表格

行：<input type="text" id="1">
列：<input type="text" id="2">
<input type="button" οnclick="fun1()" value="创建"><span style="color:#ff0000;"> //入口，当我们输入完行列数，点击调用函数fun1()</span>
<table border="1" style="width: 500px;height: 500px;" id="ta">
    <!--<tr>-->
        <!--<td>-->
        <!--</td>-->
    <!--</tr>-->
</table>

   //4.举例定义函数通过用户输入动态实现创建row行col列的表格
    //假设 3行3列
    var table = document.getElementById("ta");

//开始创建 str累加所有的字符串  把 <tr><td></td>...</tr>加到一起
    function createTable(col,row){
        var str = "";
        for(var n=0;n<col;n++){
            str = str + "<tr>";//创建行
            for(var i=0;i<row;i++){
               str = str + "<td></td>";
            }
            str = str + "</tr>";
        }
        table.innerHTML = str;//然后全部添加到table中


    }

    var obj = createTable; //对象可以指向函数
<span style="color:#ff6666;">
//fun1获得我们的 行列数，切记不要讲tr td定义在函数外，只有当我们输入完行列数，调用fun1的时候才调用tr td，否则初始就为零，点击按钮后不会被调用
</span>    function fun1(){
        var tr = document.getElementById("1").value;
        var td = document.getElementById("2").value;
        obj(tr,td); //利用 只想函数的对象进行 创建表格的函数调用
    }

</script>

</body>
</html>