您的位置：首页 > Web前端 > JavaScript

[c.y.j]js练习表格隔行添加

2014-06-11 22:11 357 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>thead</title>

<script>

function getId(n){

return document.getElementById(n);

}

function lastId(){

return getId("table1").tBodies[0].rows.length+1;

}

function tableColor(){

var otable=getId("table1");

var old="";

for(var i=0;i<lastId()-1;i++){

if(i%2){

otable.tBodies[0].rows[i].style.background="red";

}else{

otable.tBodies[0].rows[i].style.background="green";

}

otable.tBodies[0].rows[i].onmouseover=function(){

old=this.style.background;

this.style.background="blue";

}

otable.tBodies[0].rows[i].onmouseout=function(){

this.style.background=old;

}

}

}

window.onload=function(){

var user=getId("user");

var age=getId("age");

var btn=getId("button");

var otable=getId("table1");

tableColor();

btn.onclick=function(){

var tr=document.createElement("tr");

var td="<td>"+lastId()+"</td><td>"+user.value+"</td><td>"+age.value+"</td>";

tr.innerHTML=td;

otable.tBodies[0].appendChild(tr);

tableColor();

}

}

</script>

</head>

<body>

<input type="text" id="user"/>

<input type="text" id="age" />

<input type="button" id="button" value="add"/>

<table id="table1" border="1">

<thead>

<th>id</th>

<th>user</th>

<th>age</th>

</thead>

<tbody>

<tr><td>1</td><td>cyj</td><td>24</td></tr>

<tr><td>2</td><td>cyj</td><td>24</td></tr>

</tbody>

</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

[c.y.j]js练习表格隔行 添加

[c.y.j]js练习表格隔行添加