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

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 微信小程序实现图片上传

    微信小程序实现图片上传

    这篇文章主要为大家详细介绍了微信小程序实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • javascript作用域问题实例分析

    javascript作用域问题实例分析

    本文给大家分享的是个人在使用json数据生成树状目录的时候,由于作用域问题处理不当引起的一个小BUG的修复过程,小伙伴们需要的话可以参考下。
    2015-07-07
  • 微信企业号开发之微信考勤Cookies的使用

    微信企业号开发之微信考勤Cookies的使用

    使用微信考勤,每次使用微信企业号开发:微信用户信息和web网页的session的关系这个里边的方法,调用微信的接口,有点慢,微信官方也推荐使用Cookies,但如何使用Cookies,自己却一直没有搞清楚。下面小编帮大家解决难题,需要的朋友可以参考下
    2015-09-09
  • 深入分析javascript中的错误处理机制

    深入分析javascript中的错误处理机制

    这篇文章主要介绍了深入分析javascript中的错误处理机制的相关资料,需要的朋友可以参考下
    2016-07-07
  • js跨域和ajax 跨域问题的实现思路

    js跨域和ajax 跨域问题的实现思路

    大家都知道js是不能跨域的,但我们有时候就要这么用,怎么办呢?办法总是有的.
    2009-09-09
  • 基于JavaScript实现移动端TAB触屏切换效果

    基于JavaScript实现移动端TAB触屏切换效果

    我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一个移动端TAB触屏切换效果。
    2015-10-10
  • javascript实现在线客服效果

    javascript实现在线客服效果

    这篇文章主要介绍了javascript实现在线客服效果的实例代码,非常不错,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-07-07
  • Bootstrap学习笔记之css样式设计(2)

    Bootstrap学习笔记之css样式设计(2)

    这篇文章主要为大家详细介绍了Bootstrap学习笔记之css样式设计,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 浅析JS中对函数function的理解(基础篇)

    浅析JS中对函数function的理解(基础篇)

    我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法。下面给大家谈下对JS中函数function的理解,一起看看吧
    2016-10-10
  • JavaScript中的变量作用域介绍

    JavaScript中的变量作用域介绍

    这篇文章主要介绍了JavaScript中的变量作用域介绍,本文同时讲解了一个新概念变量的作用域链,需要的朋友可以参考下
    2014-12-12

最新评论