简单的js表格操作


Posted in Javascript onSeptember 24, 2016

效果图:

简单的js表格操作 

任务

 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 

var tr=document.getElementsByTagName("tr");
 for(var i= 0;i<tr.length;i++)
 {
 bgcChange(tr[i]);
 }
 // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
function bgcChange(obj)
 {
 obj.onmouseover=function(){
 obj.style.backgroundColor="#f2f2f2";
 }
 obj.onmouseout=function(){
 obj.style.backgroundColor="#fff";
 }
 }

2. 点击添加按钮,能动态在最后添加一行 

var num=2;
 function add(){
 num++;
 var tr=document.createElement("tr");
 var xh=document.createElement("td");
 var xm=document.createElement("td");
 xh.innerHTML="xh00"+num;
 xm.innerHTML="第"+num+"位学生";
var del=document.createElement("td");
 del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
 var tab=document.getElementById("table");
 tab.appendChild(tr);
 tr.appendChild(xh);
 tr.appendChild(xm);
 tr.appendChild(del);
 var tr = document.getElementsByTagName("tr");
 for(var i= 0;i<tr.length;i++)
 {
 bgcChange(tr[i]);
 }
 }

 3. 点击删除按钮,则删除当前行 

function del(obj)
 {
 var tr=obj.parentNode.parentNode;
 tr.parentNode.removeChild(tr);
 }

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
详解JavaScript树结构
Jan 09 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
JS实现简易计算器
Feb 14 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 #Javascript
轻松实现js选项卡切换效果
Sep 24 #Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 #Javascript
基于JavaScript实现跳转提示页面
Sep 24 #Javascript
JavaScript实现DOM对象选择器
Sep 24 #Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 #Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 #Javascript
You might like
php include加载文件两种方式效率比较
2010/08/08 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python卸载模块的方法汇总
2016/06/07 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
学习雷锋标语
2014/06/25 职场文书
化验室岗位职责
2015/02/14 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
Go timer如何调度
2021/06/09 Golang