<html>
<head>
<title>
</title>
<script>
function showTable(){
var otable = document.createElement("table");
otable.id="mytable";
otable.border="1";
otbody = document.createElement("tbody");
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "序号";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "姓名";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "年龄";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "出生日期";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "1";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Tom";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "22";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1990.5.14";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "2";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Jim";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "14";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1994.12.1";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "3";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Peter";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "54";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1959.7.15";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "4";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Davie";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "23";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1989.3.5";
otr.appendChild(otd);
otbody.appendChild(otr);
otable.appendChild(otbody);
document.body.appendChild(otable);
var id = document.getElementById("mytable");
for(var i=1;i<id.rows.length;i++){
id.rows[i].οnmοuseοut=function(){id.rows[i].bgColor="orange"};
id.rows[i].οnmοuseοver=function(){id.rows[i].bgColor="white"};
}
setcolor();
};
window.onload = function(){
var id = document.getElementById("mytable");
for(var i=1;i<id.rows.length;i++){
id.rows[i].οnmοuseοut=function(){id.rows[i].bgColor="orange"};
id.rows[i].οnmοuseοver=function(){id.rows[i].bgColor="white"};
}
};
function setcolor(){
var id = document.getElementById("mytable");
for(var i=1;i<id.rows.length;i++){
if(i%2==0){
id.rows[i].bgColor="orange";
}else{
id.rows[i].bgColor="gray";
}
}
}
function addTr(){
var id = document.getElementById("mytable");
var otr = id.insertRow(id.rows.length);
otr.style.height=21;
var otd;
for(var j=0;j<id.rows[0].cells.length;j++){
otd = otr.insertCell(j);
if(j==0){
otd.innerHTML=id.rows.length-1;
}else{
otd.innerText=" ";}
}
setcolor();
};
function deleteTr(){
var id = document.getElementById("mytable");
if(id.rows.length>1){
id.deleteRow(1);
for(var k=1;k<id.rows.length;k++){
id.rows[k].cells[0].innerHTML=k;
}
}
setcolor();
};
</script>
</head>
<body>
<input type="button" name="show" value="初始化" οnclick="showTable()">
<input type="button" name="add" value="增加一行" οnclick="addTr()">
<input type="button" name="delete" value="删除一行" οnclick="deleteTr()">
</body>
</html>
<head>
<title>
</title>
<script>
function showTable(){
var otable = document.createElement("table");
otable.id="mytable";
otable.border="1";
otbody = document.createElement("tbody");
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "序号";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "姓名";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "年龄";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "出生日期";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "1";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Tom";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "22";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1990.5.14";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "2";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Jim";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "14";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1994.12.1";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "3";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Peter";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "54";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1959.7.15";
otr.appendChild(otd);
otbody.appendChild(otr);
var otr = document.createElement("tr");
var otd = document.createElement("td");
otd.innerHTML = "4";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "Davie";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "23";
otr.appendChild(otd);
otd = document.createElement("td");
otd.innerHTML = "1989.3.5";
otr.appendChild(otd);
otbody.appendChild(otr);
otable.appendChild(otbody);
document.body.appendChild(otable);
var id = document.getElementById("mytable");
for(var i=1;i<id.rows.length;i++){
id.rows[i].οnmοuseοut=function(){id.rows[i].bgColor="orange"};
id.rows[i].οnmοuseοver=function(){id.rows[i].bgColor="white"};
}
setcolor();
};
window.onload = function(){
var id = document.getElementById("mytable");
for(var i=1;i<id.rows.length;i++){
id.rows[i].οnmοuseοut=function(){id.rows[i].bgColor="orange"};
id.rows[i].οnmοuseοver=function(){id.rows[i].bgColor="white"};
}
};
function setcolor(){
var id = document.getElementById("mytable");
for(var i=1;i<id.rows.length;i++){
if(i%2==0){
id.rows[i].bgColor="orange";
}else{
id.rows[i].bgColor="gray";
}
}
}
function addTr(){
var id = document.getElementById("mytable");
var otr = id.insertRow(id.rows.length);
otr.style.height=21;
var otd;
for(var j=0;j<id.rows[0].cells.length;j++){
otd = otr.insertCell(j);
if(j==0){
otd.innerHTML=id.rows.length-1;
}else{
otd.innerText=" ";}
}
setcolor();
};
function deleteTr(){
var id = document.getElementById("mytable");
if(id.rows.length>1){
id.deleteRow(1);
for(var k=1;k<id.rows.length;k++){
id.rows[k].cells[0].innerHTML=k;
}
}
setcolor();
};
</script>
</head>
<body>
<input type="button" name="show" value="初始化" οnclick="showTable()">
<input type="button" name="add" value="增加一行" οnclick="addTr()">
<input type="button" name="delete" value="删除一行" οnclick="deleteTr()">
</body>
</html>