使用javascript的动态html表_Javascript_Css_Html

使用javascript的动态html表

javascript css html

使用javascript的动态html表,javascript,css,html,Javascript,Css,Html,我是js新手。尝试使用js创建一个表。但是代码不起作用。这段代码中有什么错误？如果有人指出错误，这将是一个很大的帮助。 css在这里 <style> tr{width:100%;height:100%;border:1px solid black;} td{height:33%;width:33%;} .tableShape{ width:300px; height:300px;

我是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>


tr{宽度：100%；高度：100%；边框：1px纯黑色；}
td{高度：33%；宽度：33%；}
表形{
宽度：300px；
高度：300px；
字体大小：30px；
文本对齐：居中；
颜色：红色；
}

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>


varⅠ，j；
var-arr=新阵列（3）；
对于（i=0；i只需更改选项卡
功能，如下所示：
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);
}

功能选项卡（）{
var s=document.createElement（“表”）；
s、 setAttribute（'class'，'tableshape'）；
对于（变量i=0；i<3；i++）{
var p=s.insertRow（i）；
对于（var j=0；j<3；j++）{
var d=p.insertCell（j）；
d、 innerText=arr[i][j]；
}
}
文件。正文。附录子项；
}

这是你的
关键是，如果您使用的是这样的原始javascript，因为表有其特定的DOM结构，所以最好使用tbl.insertRow（index）
和row.insertCell（index）创建表行和单元格
不要创建每个节点，并将其附加到DOM中。
但是代码不起作用是含糊不清的，请尝试具体解释您的问题，并提供相关的代码检查我的答案，以及我为您创建的JSFIDLE演示。我单击了run按钮。但它没有显示任何表或其他内容！如果您想要，请确定检查此项我已更新了演示并添加了一个运行按钮。我不知道发生了什么，但我的浏览器上没有显示任何表格：（你的浏览器是什么？