崔昕阳的博客

念念不忘,必有回响!

JS简单案例(3)动态生成表格

1.创建一个页面:两个输入框和一个按钮,根据输入的行数和列数,生成表格。
2.代码实例:

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body><input type="text" id="rows"><input type="text" id="columns">
    <br/>
    <input type="button" value="生成" onclick="createTab()" />
    <br/>
    <div id="div1">
    </div>
    <script type="text/javascript">
        /*
        1.得到输入的行和列
        2.生成表格
            **循环行
            **在行里面循环单元格
        3.显示在页面上
            -使表格的代码设置到div里面
            -使用innerHTML属性
        */

        function createTab()
        {   
            var tab = "<table border='1' bordercolor='black'>";
            //得到输入的行和列的值
            var rows = document.getElementById("rows").value;
            var columns = document.getElementById("columns").value;
            for(var i=1; i<=rows; i++)
            {
                tab += "<tr>";
                for(var j=1; j<=columns; j++)
                {
                    tab += "<td>AAAA</td>"
                }
                tab += "</tr>";
            }
            tab += "</table>";
            var div1 = document.getElementById("div1");
            div1.innerHTML = tab;
        }

    </script>
 </body>
</html>

3.运行结果
这里写图片描述

阅读更多
个人分类: Web
想对作者说点什么? 我来说一句

三种js 动态生成表格的方法

2009年09月27日 2KB 下载

没有更多推荐了,返回首页

不良信息举报

JS简单案例(3)动态生成表格

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭