简单的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);
 }

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

相关文章

  • javascript跳转与返回和刷新页面的实例代码

    javascript跳转与返回和刷新页面的实例代码

    这篇文章主要介绍了javascript跳转与返回和刷新页面的实例代码,简单介绍了javascript中window.open()与window.location.href的区别,感兴趣的朋友一起看看吧
    2019-11-11
  • javascript实现密码验证

    javascript实现密码验证

    这篇文章主要介绍了javascript密码验证的实现方法,过程很简单具有一定的参考价值,适合初学者学习研究,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS 密码强度验证(兼容IE,火狐,谷歌)

    JS 密码强度验证(兼容IE,火狐,谷歌)

    仿JQuery中文社区注册,JS 密码强度验证(兼容IE,火狐,谷歌)
    2010-03-03
  • 基于layui实现登录页面

    基于layui实现登录页面

    这篇文章主要为大家详细介绍了基于layui实现登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 前端JS工具类lodash的超详细介绍

    前端JS工具类lodash的超详细介绍

    Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库,算是从分离出来的超集,这篇文章主要介绍了前端JS工具类lodash的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • JS实现给数组对象排序的方法分析

    JS实现给数组对象排序的方法分析

    这篇文章主要介绍了JS实现给数组对象排序的方法,结合实例形式分析了javascript数组对象排序相关实现方法与操作注意事项,需要的朋友可以参考下
    2019-06-06
  • Mint-UI时间组件起始时间问题及时间插件使用

    Mint-UI时间组件起始时间问题及时间插件使用

    这篇文章主要介绍了Mint-UI时间组件起始时间问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • 原生javascript制作贪吃蛇小游戏的方法分析

    原生javascript制作贪吃蛇小游戏的方法分析

    这篇文章主要介绍了原生javascript制作贪吃蛇小游戏的方法,结合具体实例形式分析了JavaScript实现贪吃蛇小游戏的具体步骤、功能实现、数值运算等相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • 纯css下拉菜单 无需js

    纯css下拉菜单 无需js

    这篇文章主要为大家详细介绍了纯css下拉菜单代码,无需js,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript模拟scroll滚动效果脚本

    Javascript模拟scroll滚动效果脚本

    项目需要写了一段模拟Scroll滚动代码,分享的同时,我有些疑问,希望大家能帮忙解决,代码如下
    2008-09-09

最新评论