使用javascript的動態html表

Question

我是js的新手，嘗試使用js創建表，但代碼不起作用。此代碼中的錯誤是什么？如果有人在這里指出錯誤，那將是一個很大的幫助。 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代碼在這里

 <!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

只需像這樣更改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);
}

這是你的演示

關鍵是，如果您要像這樣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