<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{
var data = [
{name:‘小红‘,age:‘26‘,sex:‘女‘},
{name:‘圆圆‘,age:‘26‘,sex:‘男‘},
{name:‘小吕‘,age:‘21‘,sex:‘女‘},
{name:‘小明‘,age:‘30‘,sex:‘女‘},
];
var otab = document.getElementById(‘tab1‘);
var otbody = otab.tBodies[0];
for( var i = 0; i < data.length; i++)
{
var otr = document.createElement(‘tr‘);
if( i % 2)
{
otr.style.background = ‘#fff‘;
}
else
{
otr.style.background = ‘pink‘;
}
var otd = document.createElement(‘td‘);
otd.innerHTML = data[i].name;
otr.appendChild(otd);
var otd = document.createElement(‘td‘);
otd.innerHTML = data[i].age;
otr.appendChild(otd);
var otd = document.createElement(‘td‘);
otd.innerHTML = data[i].sex;
otr.appendChild(otd);
var otd = document.createElement(‘td‘);
otr.appendChild(otd);
var oa = document.createElement(‘a‘);
oa.innerHTML = ‘删除‘;
oa.href = ‘javascript:;‘;
oa.onclick = function ()
{
otbody.removeChild(this.parentNode.parentNode);
for(var i = 0; i < otbody.rows.length; i++)
{
if( i % 2)
{
otr.style.background = ‘#fff‘;
}
else
{
otr.style.background = ‘pink‘;
}
}
}
otd.appendChild(oa);
otbody.appendChild(otr);
}
}
</script>
</head>
<body>
<table border="1" id="tab1" >
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>备注</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
时间： 2024-12-19 05:26:07