简单的js表格操作

 更新时间:2016年09月24日 11:52:42   作者:湘湘_Saling  
这篇文章主要为大家详细介绍了简单的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);
 }

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

相关文章

  • js实现ASP分页函数 HTML分页函数

    js实现ASP分页函数 HTML分页函数

    js实现ASP分页函数 HTML分页函数...
    2006-09-09
  • webpack4 升级迁移的实现

    webpack4 升级迁移的实现

    这篇文章主要介绍了webpack 4 升级迁移的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 如何在js中引入less的变量

    如何在js中引入less的变量

    这篇文章主要介绍了如何在js中引入less的变量,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • javascript实现随机读取数组的方法

    javascript实现随机读取数组的方法

    这篇文章主要介绍了javascript实现随机读取数组的方法,涉及javascript随机数及针对数组操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 最常用的12种设计模式小结

    最常用的12种设计模式小结

    最常用的12种设计模式小结,学习js的朋友可以参考下。
    2011-08-08
  • JS实现图片上传多次上传同一张不生效的处理方法

    JS实现图片上传多次上传同一张不生效的处理方法

    这篇文章主要介绍了JS实现图片上传多次上传同一张不生效的处理方法,处理方法也很简单,只要在删除方法里置空input,具体实例代码大家参考下本文
    2018-08-08
  • JavaScript伸缩的菜单简单示例

    JavaScript伸缩的菜单简单示例

    伸缩的菜单,想必大家都有见到过吧,实现方法也是很多的,在接下来的文章中为大家介绍下使用js是如何实现的,需要的朋友可以参考下
    2013-12-12
  • js+canvas实现滑动拼图验证码功能

    js+canvas实现滑动拼图验证码功能

    这篇文章主要介绍了js+canvas实现滑动拼图验证码功能,本文结合实例代码分步骤给大家介绍的非常详细,需要的朋友可以参考下
    2018-03-03
  • MVVM框架下实现分页功能示例

    MVVM框架下实现分页功能示例

    分页这种组件,几乎每一种框架都有这样的组件,这篇文章主要介绍了MVVM框架下实现分页功能示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 解决layer.confirm选择完之后消息框不消失的问题

    解决layer.confirm选择完之后消息框不消失的问题

    今天小编就为大家分享一篇解决layer.confirm选择完之后消息框不消失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论