js实现表格信息的删除和添加
制作一个表格,显示班级的学生信息。
要求:
1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮,能动态在最后添加一行
3. 点击删除按钮,则删除当前行
第一步: 首先,我们创建删除函数,并在删除按钮上添加点击事件;
提示: 使用removeChild()。
第二步: 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
提示: 使用createElement()、innerHTML、appendChild()。
第三步: 更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
提示: 1. 获取表格的行,getElementsByTagName 。 2. 使用for进行循环,为每行添加事件及背景颜色设置。
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> window.onload = function(){ var tr = document.getElementsByTagName('tr'); for(var i=0;i<tr.length;i++){ changeColor(tr[i]); } } function changeColor(obj){ obj.onmouseover = function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout = function(){ obj.style.backgroundColor = "#fff"; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num = 2; function add(){ num++; var tr = document.createElement('tr'); var td1 = document.createElement('td'); var td2 = document.createElement('td'); var td3 = document.createElement('td'); td1.innerHTML = 'xh00'+num; td2.innerHTML = '第'+num+"位学生"; td3.innerHTML = "<a href='javascript:;' onclick='del(this)'>删除</a>"; var table = document.getElementById('table'); table.appendChild(tr); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); var tr = document.getElementsByTagName('tr'); for(var i=0;i<tr.length;i++) { changeColor(tr[i]); } } // 创建删除函数 function del(x){ //此处不能写成remove(x),js中remove()方法用于从下拉列表删除选项。 var tr = x.parentNode.parentNode; tr.parentNode.removeChild(tr); } </script> </head> <body> <center> <table border="1" width="50%" id="table" style="text-align:center"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td>xh001</td> <td>王小明</td> <td><a href="javascript:;" onclick="del(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="del(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table><br> <input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 --> </center> </body> </html>
js实现表格信息的删除和添加的更多相关文章
- ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...
- 三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...
- MYSQL 代码删除和添加表格列方法
一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...
- MongoDB 删除,添加副本集,并修改副本集IP等信息
MongoDB 删除,添加副本集,并修改副本集IP等信息 添加副本,在登录到主节点下输入 rs.add("ip:port"); 删除副本 rs.remove("ip:po ...
- js实现网页收藏功能,动态添加删除网址
<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...
- Asp.Net MVC4入门指南(9):查询详细信息和删除记录
在本教程中,您将查看自动生成的Details和Delete方法. 查询详细信息和删除记录 打开Movie控制器并查看Details方法. public ActionResult Details(int ...
- VC/Wince 实现仿Win8 Metro风格界面3——按钮移动交换、删除、添加快捷方式(附效果图)
上一篇文章写了如何进行页面滑动切换,今天我讲一下如何实现两个按钮拖动交换位置,包括同一个页面按钮交换或者两个页面之间的按钮交换.另外就是如何拖动删除界面上的快捷方式.按钮交换和拖动删除,这两个功能基本 ...
随机推荐
- ! cocos2d 同一个sprite的触控问题
如果对一个A sprite添加触控,然后在一个场景中创建四个A的实例,那么1234逐个添加的话,只有最后一个会被点击到.其他的将不会响应.
- HDU 3966(树链剖分+点修改+点查询)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3966 题目大意:营地的分布成树型.每个营地都有一些人,每次修改修改一条链上的所有营地的人数,每次查询单 ...
- Remove Duplicates from Sorted List II leetcode java
题目: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct ...
- UOJ#61. 【UR #5】怎样更有力气
大力水手问禅师:“大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点菠菜甚至不吃菠菜却仍很有力气?” 禅师浅笑,答:“ ...
- 数组机、局域网ip查找
cmd ipconfig 以太网适配器 VMware Network Adapter VMnet8: IPv4 地址 . . . . . . . . . . . . : 192.168.233.1
- 一个关于el中获取对象属性的错误
具体过程描述为: 在JSP页面中通过<%%>定义一个非public类.并定义两个属性相应的get和set方法.在该代码段中实例化该对象,并将该对象放入Request域中. 然后在页面中使用 ...
- ubuntu下用virtualbox安装windows虚拟机
按照这个教程: http://jingyan.baidu.com/article/eae07827856ac21fed54856f.html 安装. 会出现问题:"VT-x is disab ...
- FastDFS 上传文件
[root@GW1 client]# ./fdfs_test ../conf/client.conf upload /home/tmp/1009.png This is FastDFS client ...
- [办公自动化]如何对Excel表格顶部设计
领导有一个excel要完成如下功能:顶部要包含企业LOGO,还要包含设计图号.版次等表格,还要包含类似“第 页 of 页” 总体思路: 1.利用顶端标题行完成除了页码以外的所有事情:(当然也可以利 ...
- PHP里用户密码的回复和管理
1). In /etc/my.ini, add skip-grant-tables 2). mysql -u root -p (no password required) mys ...