js动态生成表格,奇偶行换色,增加删除表格

来源:互联网 发布:ubuntu 16 chroot 编辑:程序博客网 时间:2024/05/20 18:55
<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].onmouseout=function(){id.rows[i].bgColor="orange"};
    id.rows[i].onmouseover=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].onmouseout=function(){id.rows[i].bgColor="orange"};
    id.rows[i].onmouseover=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="初始化" onclick="showTable()">
<input type="button" name="add" value="增加一行" onclick="addTr()">
<input type="button" name="delete" value="删除一行" onclick="deleteTr()">
</body>
</html>
原创粉丝点击