/
Data operation(表格属性操作).html
85 lines (72 loc) · 1.73 KB
/
Data operation(表格属性操作).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!--biao tong-->
<!Doctype HTML >
<html>
<head>
<meta charset="utf-8">
<title>Data operation</title>
<script>
window.onload = function (){
var data = [
{id:1, username:'leo', sex:'male'},
{id:2, username:'leo1', sex:'female'},
{id:3, username:'leo2', sex:'male'},
{id:4, username:'leo3', sex:'male'},
{id:5, username:'leo4', sex:'male'},
];
var oTab = document.getElementById('tab1');
var oTbody = oTab.tBodies[0];
for (var i=0; i<data.length; i++){
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = data[i].id;
oTr.appendChild(oTd);
if (i%2==0){
oTr.style.background = 'white';
}
else{
oTr.style.background = 'gray';
}
oTd = document.createElement('td');
oTd.innerHTML = data[i].username;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = data[i].sex;
oTr.appendChild(oTd);
oTd = document.createElement('td');
oTd.innerHTML = ' ';
oTr.appendChild(oTd);
var oA = document.createElement('a');
oA.innerHTML = 'delete';
oA.href = 'javascript:;';
oA.onclick = function (){
oTbody.removeChild(this.parentNode.parentNode);
for(var i=0; i<oTbody.rows.length; i++){
if(i%2 == 0){
oTbody.rows[i].style.background = 'white';
}
else{
oTbody.rows[i].style.background = 'gray';
}
}
}
oTd.appendChild(oA);
oTbody.appendChild(oTr);
}
}
</script>
</head>
<body>
<table id="tab1" width="100%" border="1px">
<thead>
<tr>
<th>number</th>
<th>Full bame</th>
<th>Gender</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>