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

最新推荐文章于 2023-04-18 18:21:21 发布

AngelaBaby_TXS

最新推荐文章于 2023-04-18 18:21:21 发布

阅读量1.2k

点赞数

分类专栏： js html 文章标签： function button input delete table

本文链接：https://blog.csdn.net/angelababy_txs/article/details/7488820

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

<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>

AngelaBaby_TXS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态生成表格，奇偶行换色，增加删除表格

function showTable(){var otable = document.createElement("table");otable.id="mytable";otable.border="1";otbody = document.createElement("tbody");var otr = document.createElement("tr");var
复制链接

扫一扫