前言
- 根据split切割字符串得到字符串组成的数组的特性，我们可以对其进行页面渲染。
- 创建空标签：var 新元素=document.createElement("标签名");
- 为此标签设置必要的属性和事件
- 新元素.属性名="属性值";
- 新元素.on事件名=function(){操作}
- 把新元素上DOM树==》父元素.appendChild(新元素);
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 1200px;
margin: auto;
text-align: center;
border: 1px solid #333;
border-collapse: collapse;
table-layout: fixed;
}
td{
border: 1px solid #333;
}
</style>
</head>
<body id="bd">
<script type="text/javascript">//想要做出表格，这种二维的东西，必然两层循环，外层循环控制行，内层循环控制列
// 数据
var str="黄伟~战士~30%@谭小霖~奶妈~90%@赵烨~刺客~10%@李品醇~肉盾~5%@黄伟~战士~30%@谭小霖~奶妈~90%@赵烨~刺客~10%@李品醇~肉盾~5%@黄伟~战士~30%@谭小霖~奶妈~90%@赵烨~刺客~10%@李品醇~肉盾~5%@黄伟~战士~30%@谭小霖~奶妈~90%@赵烨~刺客~10%@李品醇~肉盾~5%@黄伟~战士~30%@谭小霖~奶妈~90%@赵烨~刺客~10%@李品醇~肉盾~5%@黄伟~战士~30%@谭小霖~奶妈~90%@赵烨~刺客~10%@李品醇~肉盾~5%";
//先创建一个table标签
var table=document.createElement("table");
//切割数据得到有几个人
var peoples=str.split("@");
// console.log(peoples);
//有几个人我就遍历此数组，就知道要执行多少次，生成多个tr
for(var i=0;i<peoples.length;i++){
var tr=document.createElement("tr");
//对着这个人的字符串切割~，得到这个人的每一个信息，分开了
var people=peoples[i].split("~");
// console.log(people);
//遍历这个人的每一个信息，没有一个信息，我们就应该生成一个td来保存
for(var j=0;j<people.length;j++){
var td=document.createElement("td");
td.innerHTML=people[j];
tr.appendChild(td);
}
table.appendChild(tr);
}
bd.appendChild(table);//只修改DOM树一次，减少DOM渲染，dom渲染次数越多，网站性能越差
</script>
</body>
</html>
