<!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. 洛谷 P1312 Mayan游戏

    题解:搜索+模拟 剪枝: 最优性剪枝:x从小到大,y从小到大,第一次搜到的就是字典序最小 的最优解. 最优性剪枝:把一个格子和左边格子交换,和左边格子和右边格 子交换是等价的,显然让左边格子和右边交换 ...

  2. win10 svn server安装过程中到starting service时失败

    当安装到Start Service阶段后,将会出错并会弹出一个对话框,提示是否要retry. (此时SVN服务软件已经安装完毕,仅仅是无法通过证书验证,无法启动服务),如果此时选择对话框中的cance ...

  3. iis部署网页时应该避免的特殊端口

    1 tcpmux 7 echo 9 discard 11 systat 13 daytime 15 netstat 17 qotd 19 chargen 20 ftp data 21 ftp cont ...

  4. Python 函数 -next()

    next() next() 返回迭代器的下一个项目. iterator - 可迭代对象.  default - 可选,用于设置在没有下一个元素时返回该默认值,如果不设置,又没有下一个元素则会触发 St ...

  5. font-face自定义字体使用方法

    今天闲的蛋疼小七来聊一聊关于css3的font-face属性的使用方法: 首先应该好多人没用过这个属性,那只能说你们的设计师还是有人性的, 一旦电脑系统没有的特殊字体或者你设计师故意装13为难你就需要 ...

  6. 在TreeView 控件上，如果双击任何一个节点的checkbox 只会收到一次After_Check事件 但是check属性变化两次（从false到true 再从true到false)，请问该如何解决，谢谢！

    在TreeView 控件上,如果双击任何一个节点的checkbox 只会收到一次After_Check事件 但是check属性变化两次(从false到true 再从true到false),请问该如何解 ...

  7. COGS 2259 异化多肽——生成函数+多项式求逆

    题目:http://cogs.pro:8080/cogs/problem/problem.php?pid=2259 详见:https://www.cnblogs.com/Zinn/p/10054569 ...

  8. 七、Jmeter + ant + jenkins轻量级接口自动化测试

    七.Jmeter + ant + jenkins轻量级接口自动化测试 杀猪不用牛刀,工具没有牛逼高大尚之分,每个工具都有存在的理由:关键是看会不会用,怎么用,有没有用在合适的地方. 需要安装的工具: ...

  9. 根据wsdl文件生成WebService客户端代码

    有时候在项目中,一个项目可能有好几个公司在做.系统之间难免会出现互相调用接口的现象,这时候有一种办法就是使用webService.本篇文章将介绍如何将对接系统提供的WebService接口,根据对方提 ...

  10. ubuntu 14.04使用root登陆出现错误“Error found when loading /root/.profile”解决

    在刚修改完root权限自动登录后,发现开机出现以下提示: Error found when loading /root/.profile stdin:is not a tty ----........ ...