<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var bCount=1;
var xCount=1;
function addBao(){
var newRow=baoyang.insertRow(baoyang.rows.length);
newRow.id="trb";
newRow.ln=bCount;

var Input1=newRow.insertCell(0);
Input1.ln=bCount;
Input1.innerHTML='<input id="typeId" type="text" name="typeId" style="width:40" value="'+bCount+'">';

var Input2=newRow.insertCell(1);
Input2.ln=bCount;
Input2.innerHTML='<input type="text" id="dictCode" name="dictCode" style="width:80">';

var Input3=newRow.insertCell(2);
Input3.ln=bCount;
Input3.innerHTML='<input type="text" id="dictName" name="dictName" style="width:80">';

var Input3=newRow.insertCell(3);
Input3.ln=bCount;
Input3.innerHTML='<input type="text" id="remark" name="remark" style="width:80">';

var Del=newRow.insertCell(4);
Del.ln=bCount;
Del.onclick=delBao;
Del.innerHTML='<input type="button" name="Button" style="width:40" value=" 删除 " ln='+bCount+'>';

bCount++;
}

function delBao(event){
var event = event? event: window.event
var img = event.srcElement ? event.srcElement:event.target;
var trb = document.getElementById("baoyang");
var rows = trb.rows;
var trbline=parseInt(img.parentElement.ln,10);
if (trbline>0) {
for (var i=1;i<rows.length;i++){
if (rows[i].ln==trbline){
baoyang.deleteRow(i);
}
}
}
}

function addXin(){
var newRow=xintian.insertRow(xintian.rows.length);
newRow.id="trx";
newRow.ln=xCount;

var Input1=newRow.insertCell(0);
Input1.ln=xCount;
Input1.innerHTML='<input type="text" id="dataId" name="dataId" style="width:40" value="'+xCount+'">';

var Input2=newRow.insertCell(1);
Input2.ln=xCount;
Input2.innerHTML='<input type="text" id="dicDataName" name="dicDataName" style="width:90">';

var Input3=newRow.insertCell(2);
Input3.ln=xCount;
Input3.innerHTML='<select id="dicType" name="dicType" > <option value="" selected="selected">[请选择标识]</option></select>';

Del=newRow.insertCell(3);
Del.ln=xCount;
Del.onclick=delXin;
Del.innerHTML='<input type="button" name="Button" style="width:40" value=" 删除 " ln='+xCount+'>';

xCount++;
}
function delXin(event){
var event = event? event: window.event
var img = event.srcElement ? event.srcElement:event.target;
var trx = document.getElementById("xintian");
var rows = trx.rows;
var trline=parseInt(img.parentElement.ln,10);
if (trline>0) {
for (var i=1;i<rows.length;i++){
if (rows[i].ln==trline){
xintian.deleteRow(i);
}
}
}
}
</script>

</head>

<body>
<table width="707" cellspacing="0" cellpadding="0" border="0" class="uniformstyle" id="myform">
<tbody>
<tr>
<td valign="top">
<table class="myformstyle" id="baoyang">
<tr id="trb">
<td style="width:40">序号</td>
<td style="width:80">标识编码</td>
<td style="width:80">标识分类名称</td>
<td style="width:80">备注</td>
<td style="width:50"><input type="button" value="添加" onclick="addBao()" style="width:40"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table class="myformstyle" id="xintian">
<tr id="trx">
<td style="width:40">序号</td>
<td style="width:90">名称</td>
<td style="width:40">标识分类</td>
<td style="width:40"><input type="button" value="添加" onclick="addXin()" style="width:40"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

-----来源http://blog.csdn.net/maypol/article/details/5372744

js动态添加删除行，兼容ie和火狐的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  3. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  4. 【原生js】js动态添加dom，如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  5. 使用js动态添加组件

    在文章开始之前,我想说两点 1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高   手不吝指教# 2 我知道这个标题起的比较蛋疼,大家看图就能说明问题 ...

  6. MUI 里js动态添加数字输入框后，增加、减少按钮无效

    numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...

  7. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  8. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  9. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Spring MVC 确定目标方法POJO 类型参数

    1:确定一个Key 2. 在implicitMode 中存在Key 对应的对象, 若存在则作为参数传入 3. 在implicitMode 中不存在Key 对应的对象, 则检查当前@SessionAtr ...

  2. .NET MVC 两种视图引擎(Razor、Aspx)

    ASPX 优点:         通过上面小小的对比,不难看出,与ASP.NET MVC紧密集成,对于以往ASP.NET开发人员有更好体验.其实它还有其他几优点:         ●智能感应      ...

  3. 第二次安装docker时，报Transaction check error的解决方法

    如果在yum安装软件的时候,出现了Transaction check error:这种情况,说明rpm软件包出现了冲突,解决方法是: vi /etc/yum.repos.d/epel.repo 将en ...

  4. jdk5新特性

    前两天看到jdk10试用版都出来了,才发现自己连1.8都没用过,对不同版本的jdk的新特性也不是太了解,所以想还是百度一下看看人家怎么说然后自己记录总结一下,其中jdk1.8的新特性可以到edu.51 ...

  5. Rsync+sersync实现数据实时同步

    前言: 一.为什么要用Rsync+sersync架构? 1.sersync是基于Inotify开发的,类似于Inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增 ...

  6. URLconf

    URLconf 浏览者通过在浏览器的地址栏中输入网址请求网站,对于Django开发的网站,由哪一个视图进行处理请求,是由url匹配找到的 配置 在test3/settings.py中通过ROOT_UR ...

  7. sql语句执行的时间

    统计mysql里每条SQL语句执行的时间 收藏 CrazyHarry 发表于 2年前 阅读 3785 收藏 8 点赞 3 评论 3 Google.Github 双重认证前端课程,独家硅谷内容,每周直播 ...

  8. java.lang.NullPointerException - 如何处理空指针异常

    当应用程序试图null在需要对象的情况下使用时抛出.这些包括: 调用null对象的实例方法. 访问或修改null对象的字段. 把长度null当作一个数组. 像访问或修改null阵列一样访问或修改插槽. ...

  9. 导出 java.io.IOException: 权限不够

    项目原先都是开发使用root账号登陆服务器,人肉部署. 今天改成了自动部署,部署之后发现导出用不了了,查看服务器日志提示: 查看项目启动用户是app,推断是app用户的权限不够,导致导出无法在服务器创 ...

  10. 序列下载及处理之seqinr包

    缺点:需要联网,经常出错,不是操作问题而是因为网络问题 安装 if("seqinr" %in% rownames(installed.packages()) == FALSE) { ...