案例六:动态生成表格

创建一个页面,一个按钮,两个输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
行:<input type = "text" id="h"/>
列:<input type = "text" id="l"/><br/>
<input type="button" value="生成" onclick="add();"/>
<div id="divv">

</div>

<script type="text/javascript">
    function add() {
        var h = document.getElementById("h").value;
        var l = document.getElementById("l").value;
        var tab = "<table border='1' bordercolor='blue'>";
         for (var i = 1; i <= h; i++) {
        tab+="<tr>";
        for (var j = 1; j <= l; j++) {
            tab+="<td>aaaaa</td>";
          }
         tab +="</tr>";
          }
        tab +="</table>";
        var divv= document.getElementById("divv");
        divv.innerHTML=tab;
    }</script>
</body>
</html>
屏幕快照 2019-04-11 下午8.08.10.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 这个序可能会有些长 先作个自我介绍,我是一名交互设计师,90后。我并不怎么喜欢编辑文章或写点什么,就是因为懒,所以...
    IxDKN阅读 11,159评论 16 160
  • 2017.02.22 可以练习,每当这个时候,脑袋就犯困,我这脑袋真是神奇呀,一说让你做事情,你就犯困,你可不要太...
    Carden阅读 1,408评论 0 1
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,792评论 0 17
  • 18年的最后一天,上午去了梅村钱老师那里,下午在小燕那里做泥膜,以后和小五一起看了《来电狂响》回来路上,在公交车上...
    小样儿_d623阅读 123评论 0 0