<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<style type="text/css">
table,th,td{
border: 1px solid #ccc;
}
table{
border-collapse: collapse;
}
</style>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var str=[
{name:'a',subjiect:'math',score:'100'},
{name:'a',subjiect:'math',score:'100'},
{name:'a',subjiect:'math',score:'100'},
{name:'a',subjiect:'math',score:'100'}
]
var head=['姓名','学科','分数'];
var box=document.getElementById('box');
var table=document.createElement('table');
var thead=document.createElement('thead');
table.appendChild(thead);
var tbody=document.createElement('tbody');
table.appendChild(tbody);
console.log(table);
var tr=document.createElement('tr');
thead.appendChild(tr);
var s='';
for (var i = 0; i < head.length; i++) {
s+='<th>'+head[i]+"</th>";
}
tr.innerHTML=s;
box.appendChild(table);
for (var i = 0; i < str.length; i++) {
var m='';
var tr=document.createElement('tr');
tbody.appendChild(tr);
for (var key in str[i]) {
console.log(str[i][key]);
m+='<td>'+str[i][key]+'</td>';
}
tr.innerHTML=m;
var td=document.createElement('td');
tr.appendChild(td);
var a=document.createElement('a');
td.appendChild(a);
a.href='#';
a.innerText='删除';
a.onclick=function (argument) {
// body...
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</html>
