制作一个表格，显示班级的学生信息。

要求：

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

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

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

第一步： 首先，我们创建删除函数，并在删除按钮上添加点击事件；

提示: 使用removeChild()。

第二步： 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

提示: 使用createElement()、innerHTML、appendChild()。

第三步： 更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

提示:
1. 获取表格的行，getElementsByTagName 。
2. 使用for进行循环，为每行添加事件及背景颜色设置。
<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript"> 

  window.onload = function(){
    var tr = document.getElementsByTagName('tr');
    for(var i=0;i<tr.length;i++){
       changeColor(tr[i]);
    }
  }
	function changeColor(obj){
        obj.onmouseover = function(){
            obj.style.backgroundColor="#f2f2f2";
        }
        obj.onmouseout = function(){
            obj.style.backgroundColor = "#fff";
        }
	}

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
    var num = 2;
    function add(){
        num++;
        var tr  = document.createElement('tr');
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        td1.innerHTML = 'xh00'+num;
        td2.innerHTML = '第'+num+"位学生";
        td3.innerHTML = "<a href='javascript:;' onclick='del(this)'>删除</a>";
        var table = document.getElementById('table');
        table.appendChild(tr);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        var tr = document.getElementsByTagName('tr');
        for(var i=0;i<tr.length;i++)
        {
         changeColor(tr[i]);
        }
     }

     // 创建删除函数
     function del(x){       //此处不能写成remove(x),js中remove()方法用于从下拉列表删除选项。
         var tr = x.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }

  </script>
 </head>
 <body>
  <center>
	   <table border="1" width="50%" id="table" style="text-align:center">
	   <tr>
		<th>学号</th>
		<th>姓名</th>
		<th>操作</th>
	   </tr>  

	   <tr>
		<td>xh001</td>
		<td>王小明</td>
		<td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>

	   <tr>
		<td>xh002</td>
		<td>刘小芳</td>
		<td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>
	   </table><br>
	   <input type="button" value="添加一行" onclick="add()" />
     <!--在添加按钮上添加点击事件  -->
   </center>
 </body>
</html>

js实现表格信息的删除和添加的更多相关文章

  1. ant design 中实现表格头部可删除和添加

    我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...

  2. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  3. js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...

  4. 三.jquery.datatables.js表格编辑与删除

    1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...

  5. MYSQL 代码删除和添加表格列方法

    一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...

  6. MongoDB 删除，添加副本集，并修改副本集IP等信息

    MongoDB 删除,添加副本集,并修改副本集IP等信息 添加副本,在登录到主节点下输入 rs.add("ip:port"); 删除副本 rs.remove("ip:po ...

  7. js实现网页收藏功能，动态添加删除网址

    <html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...

  8. Asp.Net MVC4入门指南（9）：查询详细信息和删除记录

    在本教程中,您将查看自动生成的Details和Delete方法. 查询详细信息和删除记录 打开Movie控制器并查看Details方法. public ActionResult Details(int ...

  9. VC/Wince 实现仿Win8 Metro风格界面3——按钮移动交换、删除、添加快捷方式（附效果图）

    上一篇文章写了如何进行页面滑动切换,今天我讲一下如何实现两个按钮拖动交换位置,包括同一个页面按钮交换或者两个页面之间的按钮交换.另外就是如何拖动删除界面上的快捷方式.按钮交换和拖动删除,这两个功能基本 ...

随机推荐

  1. HDU3341 Lost's revenge（AC自动机+DP）

    题目是给一个DNA重新排列使其包含最多的数论基因. 考虑到内存大概就只能这么表示状态: dp[i][A][C][G][T],表示包含各碱基个数为ACGT且当前后缀状态为自动机第i的结点的字符串最多的数 ...

  2. BZOJ4289 : PA2012 Tax

    一个直观的想法是把每条边拆成两条有向边,同时每条有向边是新图中的一个点.对于两条边a->b与b->c,两点之间连有向边,费用为两条边费用的最大值.然后新建源点S与汇点T,由S向所有起点为1 ...

  3. Noi2011 : 智能车比赛

    假设S在T左边,那么只能往右或者上下走 f[i]表示S到i点的最短路 f[i]=min(f[j]+dis(i,j)(i能看到j)) 判断i能看到j就维护一个上凸壳和一个下凸壳 时间复杂度$O(n^2) ...

  4. 开学后，板刷usaco！

    我要开权限我要开权限我要开权限我要开权限我要开权限我要开权限我要开权限我要开权限 他们刷rank的太可恶了 没有usaco银组金组分类的oj太可恶了 没有usaco翻译的太可恶了 没有usaco数据的 ...

  5. 《菊与刀》--[美]鲁思·本尼迪克特（Ruth Benedict）

    <菊与刀>这本书实在是好看. 下面是一些书摘: * 由在美国曾经全力以赴与之战斗的敌人中,日本人的脾气是最琢磨不透的. * “菊”本是日本皇家家微,“刀”是武家文化的象征. * 日本人的格 ...

  6. jQuery.Validate验证库详解

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  7. [转] - QBuffer类参考

    QBuffer类参考 QBuffer类是一个操作QByteArray的输入/输出设备. 详情请见…… #include <qbuffer.h> 继承了QIODevice. 所有成员函数的列 ...

  8. Spring对加载的bean之间循环依赖的处理

    根据下面文档的叙述,简言之: 对于相互之间通过构造函数注入相互循环依赖的情况,Spring会抛出BeanCurrentlyInCreationException错误. 如果AB两个beans是通过属性 ...

  9. Java判断一个时间是否在另一个时间段内

    需求:当时间在凌晨0点至0点5分之间程序不执行. 也就是实现判断当前时间点是否在00:00:00至00:05:00之间 方法: Java代码 : /** * 判断时间是否在时间段内 * * @para ...

  10. CodeBlocks的汉化、主题美化及其调试功能的实现

    破事水 最近由于Cfree5经常崩溃+调试语句运行速度比较慢,想尝试一下另一个听说很好用的IDE Code::Blocks. 先上官网的安装包(自带mingw,安装完可以直接用,适用于windows系 ...