动态创建一个表（javascript）

最新推荐文章于 2024-09-14 18:52:56 发布

无忧#

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量262

点赞数 1

文章标签： JavaScript 动态创建表格数据可视化 DOM操作

本文链接：https://blog.csdn.net/weixin_52473454/article/details/121473375

版权

效果图：

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
    <style>
        table{
            width:800px;
            text-align: center;
            margin: auto;
            border-collapse: collapse;
        }
        td{
            width:200px;
            border-bottom-style:solid;
            border-bottom-color: #f5f5f5;
            padding: 10px 0px;
        }
    </style>
</head>
<body>
<script>
    var t=new Array(5);
        t[0]=new Array("id","名称","血量","伤害"),
        t[1]=new Array("1","gareen","340","58"),
        t[2]=new Array("2","teemo","320","76"),
        t[3]=new Array("3","annie","380","38"),
        t[4]=new Array("4","deadbrother","400","90");
    var ta=document.createElement("table");
    document.body.appendChild(ta);
    var tr=new Array(),
        td=new Array(),i,j;
    for(i=0;i<5;i++)
    {
        tr[i]=document.createElement("tr");
        ta.appendChild(tr[i]);
        for(j=0;j<4;j++)
        {
            var text=document.createTextNode(t[i][j]);
            td[j]=document.createElement("td");
            tr[i].appendChild(td[j]);
            td[j].appendChild(text);
        }
    }
</script>
</body>
</html>