js实现在表格中删除和添加一行
<!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实现在表格中删除和添加一行的更多相关文章
- JQUERY动态绘制表格，实现动态添加一行，删除一行
HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...
- cmd中删除、添加、修改注册表命令
转自:http://www.jb51.net/article/30586.htm regedit的运行参数 REGEDIT [/L:system] [/R:user] filename1 REGEDI ...
- js导出excel表格中较长数字串会变成科学计数法问题
在做项目中,遇到导出excel表格时,银行账户号数字过长,导出的数字串变为计数法形式,如下图: 网上搜到解决方法,粘贴到这以供学习.不断更新. 原博地址:http://www.cnblogs.com/ ...
- JAVA循环迭代中删除或添加集合数据报java.util.ConcurrentModificationException错误
1.写出下面的输出结果 public class test{ public static void main(String [] args) List<String> list = new ...
- 表格的删除与添加以及id的唯一性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- telerik:RadGrid 表格中删除数据
<telerik:RadGrid OnItemCommand=" Height="490px" Culture="zh-CN" CssClass ...
- linux shell中如何批量添加一行内容到某些文件的末尾?
答:先使用find找出要指定的某些文件,然后使用xargs和sed工具将内容插入到这些文件的末尾 find . -name 'filename*' | xargs sed -i '$a\added-c ...
- JS实现table表格在鼠标移动出现一行变色或者十字叉变色
1,一行变色 <script> function trBg(){ var tab=document.getElementById("table"); var tr=ta ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
随机推荐
- 【HDU】4632 Palindrome subsequence(回文子串的个数)
思路:设dp[i][j] 为i到j内回文子串的个数.先枚举所有字符串区间.再依据容斥原理. 那么状态转移方程为 dp[i][j] = dp[i][j-1] + dp[i+1][j] - dp[i+ ...
- sqlalchemy 学习（二）scoped session
数据库设计的难点之一,是session生命周期的管理问题.sqlalchemy提供了一个简单的session管理机制,即scoped session.它采用的注册模式.所谓的注册模式,简单来说,是指在 ...
- CSS设计取消a标签的修饰，转为文本
用法:text-decoration:none;修饰:text-decoration的用法:http://www.runoob.com/cssref/pr-text-text-decoration.h ...
- 12C 对表分区维护的增强
Oracle Database 12c对表分区变化比较多,共分为下面几点 1.在线移动分区:通过MOVE ONLINE关键字实现在线分区移动.移动过程中,对表和被移动的分区可以执行查询操作, DML语 ...
- lbypmall系统备份恢复
打开phpmyadmin 1.数据库创建,在服务器上创建lbypmall数据库,排序规则utf8_general_ci 2.mysqldump -u root -p lbypmall > lby ...
- Swift app中的Crash捕获与处理
1. 为什么会Crash 常见的Crash原因有:访问已经被释放的内存,数组越界,使用!解包值为nil的变量.当遇到这些情况时,说明应用已经遇到了很严重的非预期错误,无法再继续运行.操作系统检测到这些 ...
- form表单中name和id区别
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字.图形.动画.声音.表格.链接等.HTML的结构包括头部(Head).主体(Body)两大部分,其中头部描述浏览器所需的信息,而主 ...
- 升级3.4成3.6 ubuntu14.04 和miniconda虚拟环境
打开Anaconda Prompt窗口conda update conda 先升级conda激活要升级python的虚拟环境conda install python=3.6.6 再升级pythonco ...
- 安装S_S相关报错的troubleshooting
在安装S_S server时,在Debian上会出现类似如下的报错: File , in <module> sys.exit(main()) File , in main config = ...
- laravel修改命名空间中的App为各自项目的名称(个人喜好)
学习源头:https://blog.csdn.net/xx1129244705/article/details/77965618 laravel框架的应用默认命名空间是App,修改命名空间的可通过ap ...