黑马程序员技术交流社区

标题: javascript中table的创建 [打印本页]
作者: 张龙欢    时间: 2013-6-3 20:34
标题: javascript中table的创建
本帖最后由 张龙欢 于 2013-6-8 11:35 编辑

我下面代码的功能主要是想实现，当我文本框输入行数和列数时，一点击按钮就可以创建相对应的表格来！但是主要的问题是，点了之后创建不了。
  1. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
  2. <title>Insert title here</title>
  3. <script type="text/javascript">

  5. function chuangjian(){
  6. var row=document.getElementById("crow").value; //获取行数
  7. var lie=document.getElementById("clie").value; //获取列数

  9. var table = document.createElement("table");

  11. for (var x=1;x<=row;x++){
  12. var tr=document.creatElement("tr");
  13. table.appendChild(tr);
  14. for (var y=1;y<=lie;y++){
  15. var td=document.createElement("td");
  16. td.innerHTML=x+","+y;
  17. tr.appendChild(td);
  18. }
  19. }
  20. document.body.appendChild(table); //把表格添加到body中
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. 创建的行数：<input type="text" style="width:30xp" id="crow"><br />
  26. <br />
  27. <br />
  28. 创建的列数：<input type="text" style="width:30xp" id="clie">
  29. <br/>
  30. <input type="button" value="创建" onclick="chuangjian()">
  31. <br />
  32. <br />

  34. </body>
  35. </html>
复制代码
作者: 秦兰之    时间: 2013-6-8 02:40
本帖最后由 秦兰之 于 2013-6-8 02:59 编辑

我是在DW4里测试的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">

function chuangjian()
{
        var row=document.getElementById("crow").value; //获取行数
        var lie=document.getElementById("clie").value; //获取列数

        var table = document.createElement("table");

        for (var x=1;x<=row;x++)
        {
                //var tr=document.creatElement("tr");//注释了这行，虽然看上去是一样的，creatElement少了个e 。
                var tr=document.createElement("tr");
               
                table.appendChild(tr);
               
                for (var y=1;y<=lie;y++)
                {
                        var td=document.createElement("td");
                        td.innerHTML=x+","+y;
                        tr.appendChild(td);
                }
        }
        document.body.appendChild(table); //把表格添加到body中
}
</script>

</head>
<body>
        创建的行数：<input type="text" style="width:30xp" id="crow"><br />
<br />

<br />
        创建的列数：<input type="text" style="width:30xp" id="clie">
<br/>

<input type="button" value="创建">
<br />
<br />

</body>
</html>

黑马云青年给您回复。

作者: 张龙欢    时间: 2013-6-8 11:09
秦兰之 发表于 2013-6-8 02:40
我是在DW4里测试的。

谢谢！！！！
作者: 秦兰之    时间: 2013-6-8 11:33
解决了就把问题改为已解决。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2