<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

window.onload = function(){
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";
}
}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
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]);
}
}

// 创建删除函数
function del(obj)
{
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}

</script>
</head>
<body>
<table border="1" width="50%" id="table">
<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>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>

js实现在表格中删除和添加一行的更多相关文章

  1. JQUERY动态绘制表格，实现动态添加一行，删除一行

    HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...

  2. cmd中删除、添加、修改注册表命令

    转自:http://www.jb51.net/article/30586.htm regedit的运行参数 REGEDIT [/L:system] [/R:user] filename1 REGEDI ...

  3. js导出excel表格中较长数字串会变成科学计数法问题

    在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...

  4. JAVA循环迭代中删除或添加集合数据报java.util.ConcurrentModificationException错误

    1.写出下面的输出结果 public class test{ public static void main(String [] args) List<String> list = new ...

  5. 表格的删除与添加以及id的唯一性

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. telerik:RadGrid 表格中删除数据

    <telerik:RadGrid OnItemCommand=" Height="490px" Culture="zh-CN" CssClass ...

  7. linux shell中如何批量添加一行内容到某些文件的末尾?

    答:先使用find找出要指定的某些文件,然后使用xargs和sed工具将内容插入到这些文件的末尾 find . -name 'filename*' | xargs sed -i '$a\added-c ...

  8. JS实现table表格在鼠标移动出现一行变色或者十字叉变色

    1,一行变色 <script> function trBg(){ var tab=document.getElementById("table"); var tr=ta ...

  9. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

随机推荐

  1. ASP.NET Cache缓存的使用

    ASP.NET Cache是提升系统性能的重要方法,它使用了“最近使用”原则(a least-recently-used algorithm).在数据库访问中经常会用到Cache保存数据库数据. 1. ...

  2. Ubuntu-14.04-QT开发环境搭建-(一)

    Ubuntu 14.04 QT 开发环境搭建 一 . 软件:qt-creator-linux-x86-opensource-2.7.0.binqt-everywhere-opensource-src- ...

  3. java中的getProperty()方法。获取系统中属性名为key的属性对应的值

    总结:getProperty方法:获取系统中属性名为key的属性对应的值,系统中常见的属性名以及属性如下: 现在用getProperty()的方法,获取系统信息代码: package com.aaa; ...

  4. 使用Revel(go)开发网站（全面版）

    Revel很好的利用了Go语言的goroutine,把每一个request都分配到了goroutine里.不用再写一大堆的回调.如果你写过nodejs的话就会深刻的体会到callback hell是什 ...

  5. 八 Connect API 连接器

    Connect API: 实现一个连接器(connector),不断地从一些数据源系统拉取数据到kafka,或从kafka推送到宿系统(sink system). 大多数Connect使用者不需要直接 ...

  6. python学习（五） 条件、循环和其他语句

    第五章 条件.循环和其他语句 5.1 print和import的更多信息 5.1.1 使用逗号输出 >>> print('age',43,45)         // 可以用逗号隔开 ...

  7. DoDataExchange函数，UpdateData(TRUE)和UpdateData(FALSE)的区别

    MFC控件(暂时为Edit控件)与数据的绑定,变量值可以在界面和后台之间传递. 我们在DoDataExchange(CDataExchange* pDX) 函数里,实现了MFC控件和变量的绑定.  若 ...

  8. vs2017发布web项目

    1.webform项目发布 1.右键选择项目. 2.选择自定义. 3.“配置文件名称”,发布后生成在项目中记录此次发布选择的配置信息文件名,下次发布默认为此次选择的配置信息,可以删除,随便填一个. 4 ...

  9. WebSocket实战之JavaScript例子

    一.详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读 ...

  10. sata2.0和sata3.0的区别

    sata是指电脑主板上的硬盘接口,3.0是2.0的升级版本,发布于2009年,所以2010年之前的电脑主板基本都只提供sata2.0接口,如果你不知道自己的电脑是sata2.0还是sata3.0,想想 ...