javascript案例：动态生成表格

最新推荐文章于 2020-07-02 09:24:02 发布

YKbsmn

最新推荐文章于 2020-07-02 09:24:02 发布

阅读量1.1k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/YKbsmn/article/details/104138660

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js案例：动态生成表格

一、文字梳理

* 创建一个页面：两个输入框和一个按钮

* 第一步：得到输入的行和列的值

* 第二步：生成表格

- 循环行

- 在行里面循环单元格

* 第三步：把表格（表格放到变量里面）显示到页面上（通过div.innerHTML）

二、代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    行：<input type="text" id="line"/>
    列：<input type="text" id="row"/><br />
    
    <input type="button" value="生成" onclick="add()" />
    <div id="div1">
        
    </div>
    <script type="text/javascript">
        function add() {
            //获取输入行和列
            var line1 = document.getElementById("line").value;
            var row1 = document.getElementById("row").value;
            //重点是把表格放到变量tab里面
            var tab = "<table border='1'>";
            for (var i = 0; i < line1; i++) {
                tab += "<tr>";
                for (var j = 0; j < row1; j++) {
                    tab += "<td>zzyykk</td>";
                }
                tab += "</tr>";
            }
            tab+="</table>";
            var div1 = document.getElementById("div1");//得到div标签
            div1.innerHTML = tab;//把表格的代码设置到div里面
        }
    </script>
</body>
</html>

注意：代码直接复制过去有个bug，生成按钮的事件onclick的o形式变了

YKbsmn

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript案例：动态生成表格

js案例：动态生成表格一、文字梳理* 创建一个页面：两个输入框和一个按钮* 第一步：得到输入的行和列的值* 第二步：生成表格- 循环行- 在行里面循环单元格* 第三步：把表格（表格放到变量里面）显示到页面上（通过div.innerHTML）二、代码展示<!DOCTYPE html><html><head> &...
复制链接

扫一扫

专栏目录