简单的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 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
js自定义select下拉框美化特效
May 12 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
python端口扫描系统实现方法
2014/11/19 Python
详解Python中的type()方法的使用
2015/05/21 Python
python+django加载静态网页模板解析
2017/12/12 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Python读取csv文件实例解析
2019/12/30 Python
Python内置函数property()如何使用
2020/09/01 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
党员个人对照检查材料
2014/10/01 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL