表格添加删除

最新推荐文章于 2022-11-02 10:40:03 发布

qq_41685108

最新推荐文章于 2022-11-02 10:40:03 发布

阅读量107

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41685108/article/details/105674863

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>表格隔行变色</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

let tab= document.getElementById('tab')

//获取第0个tbody里面的行

let rows=tab.tBodies[0].rows;

//储存原来的颜色

let bgcolor=''

//获取所有的a标签

let as=document.getElementsByTagName('a');

function change(){

for(let i=0;i<rows.length;i++){

if(i%2==0){

rows[i].style.background='red'

}

rows[i].οnmοuseοver=function(){

bgcolor=this.style.background;

this.style.background='pink'

}

rows[i].οnmοuseοut=function(){

//移除颜色恢复

this.style.background=bgcolor

}

// 循环遍历a标签

for(let i=0;i<as.length;i++){

//给每个a标签添加事件

as[i].οnclick=function(){

//点击当前a标签的时候删除表格的身体里面的当前a标签的父标签td的父标签tr

tab.tBodies[0].removeChild(this.parentNode.parentNode)

}

//获取按钮

let sub=document.getElementById('sub')

//获取姓名

let name=document.getElementById('name')

//获取age

let age=document.getElementById('age')

//获取sex

let sex=document.getElementById('sex')

//提交事件

sub.οnclick=function(){

//创建一行

let tr=document.createElement('tr')

//姓名列

let nameTd=document.createElement('td');

//年龄列

let ageTd=document.createElement('td');

//性别列

let sexTd=document.createElement('td');

//删除列

let deletd=document.createElement('td');

//删除a标签

let atd=document.createElement('a');

//设置a标签的锚

atd.href='#'

//a标签内容

atd.innerText='删除'

//a标签追加到删除列

deletd.appendChild(atd);

//name输入框的值给列标签

nameTd.innerText=name.value;

ageTd.innerText=age.value;

sexTd.innerText=sex.value;

//追加进tr行

tr.appendChild(nameTd)

tr.appendChild(ageTd)

tr.appendChild(sexTd)

tr.appendChild(deletd)

//增加的行插入在表格的第一行的前面

tab.tBodies[0].insertBefore(tr,tab.tBodies[0].firstElementChild);

change()

}

</script>

qq_41685108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格添加删除

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>表格隔行变色...
复制链接

扫一扫