使用javascript的动态html表

Question

i am new to js.trying to create a table using js.but codes are not working .what are the faults in this code?it would be a great help if anyone point out the mistakes here. 我是js的新手，尝试使用js创建表，但代码不起作用。此代码中的错误是什么？如果有人在这里指出错误，那将是一个很大的帮助。 the css is here CSS在这里

<style>
        tr{width:100%;height:100%;border:1px solid black;}
        td{height:33%;width:33%;}
        .tableShape{
            width:300px;
            height:300px;
            font-size:30px;
            text-align:center;
            color:red;
        }
        </style>

js code is here js代码在这里

 <!DOCTYPE html>
    <html>
    <head>
    <title>
    </title>

    </head>
    <body>

    <script>
    var i,j;
    var arr=new Array(3);
    for(i=0;i<3;i++){
    arr[i]=new Array(3);
    }
    for(i=0;i<3;i++){
    for(j=0;j<3;j++){
    arr[i][j]=1;
    }}
    function tabs(){

    var s=document.createElement("table");
    s.setAttribute('class',"tableshape");
    for(i=0;i<3;i++){
    var p=s.creatChild("tr");
    for(j=0;j<3;j++){
              var d=p.creatChild("td");
              d.appendTextNode(arr[i][j]);

              }
              }
              document.body.appendChild(s);
              }
    window.onLoad=tabs;
    </script>

    </body>
    </html>

Answer 1

just change your tabs function like this: 只需像这样更改tabs功能：

function tabs() {

    var s = document.createElement("table");
    s.setAttribute('class', "tableshape");
    for (var i = 0; i < 3; i++) {
        var p = s.insertRow(i);
        for (var j = 0; j < 3; j++) {
            var d = p.insertCell(j);
            d.innerText = arr[i][j];

        }
    }
    document.body.appendChild(s);
}

this is your DEMO 这是你的演示

The point is, if you are doing raw javascript like this, since tables have their specific DOM structure, you better create table rows and cells using tbl.insertRow(index) and row.insertCell(index) instead of creating every single node, and append it to the DOM. 关键是，如果您要像这样tbl.insertRow(index)原始javascript，则由于表具有其特定的DOM结构，因此最好使用tbl.insertRow(index)和row.insertCell(index)创建表行和单元格，而不是创建每个节点，并且将其附加到DOM。

使用javascript的动态html表

问题描述

1 个解决方案

解决方案1
0 2014-01-13 07:15:07

使用javascript的动态html表

问题描述

1 个解决方案

解决方案1 0 2014-01-13 07:15:07

解决方案1
0 2014-01-13 07:15:07