js代码实现表格隔行变色,添加新的元素,以及鼠标停留变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<script>
window.onload=function () {
var otab = document.getElementById('tab2');
var oldcolor = '';
for (var i = 0; i < otab.tBodies[0].rows.length; i++) {
otab.tBodies[0].rows[i].onmouseover = function () {
oldcolor = this.style.background;
this.style.background='green';
};
otab.tBodies[0].rows[i].onmouseout = function () {
this.style.background=oldcolor;
};
if (i%2) {
otab.tBodies[0].rows[i].style.background="#CCC";
} else{
otab.tBodies[0].rows[i].style.background='';
}
}
var obtn = document.getElementById('btn1');
var onumber = document.getElementById('number');
var oname = document.getElementById('name');
var oage = document.getElementById('age');
var oid = otab.tBodies[0].rows.length+1;
obtn.onclick = function () {
var otr = document.createElement('tr');
var otd = document.createElement('td');
//otd.innerHTML = otab.tBodies[0].rows.length+1; 采用这种方法会让删除的时候出现id重复的情况
otd.innerHTML = oid++;
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = oname.value //?
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = onumber.value //?
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = oage.value //?
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = '<a href="javascript:;">删除</a>' //?
otr.appendChild(otd);
otd.getElementsByTagName('a')[0].onclick=function () {
otab.tBodies[0].removeChild(this.parentNode.parentNode);
}
otab.tBodies[0].appendChild(otr);
};
}
</script>
</head>
<body>
姓名:<input id="name" type="text" />
学号: <input id="number" type="text" />
年龄:<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab2" width="500" border="1">
<thead>
<td>序号</td>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>丁丁</td>
<td>131412</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>钟辉</td>
<td>131212</td>
<td>20</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>申振</td>
<td>131415</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>郑元超</td>
<td>131315</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>于加良</td>
<td>111415</td>
<td>20</td>
<td></td>
</tr>
</tbody>
</table>
</body>