<!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. 可视化库-seaborn-多变量分析绘图(第五天)

    1. sns.stripplot(x='data', y='total_bill', data=tips, jitter=True), 画出竖形的样子,jitter=True为了使得数据尽量分开 im ...

  2. Mysql 函数, 存储过程, 任务调度

    官网链接:   https://dev.mysql.com/doc/refman/5.7/en/stored-programs-views.html

  3. Flash Builder编译的swf为什么在bin-debug下运行正常，复制到其他文件夹就不正常

    在Flash Builder/Flex Builder中,可以使用编译参数-use-network=false实现

  4. DOM0和D0M2级事件

    1.DOM0级事件:on+事件类型 1.1.在html行内直接绑定, 1.2.在js中绑定 A.DOM0级事件和DOM0级事件相互之间会覆盖,比如以下代码执行后弹出jsDOM0级,js中绑定的事件 覆 ...

  5. LayeruI Loadding Custom word

    var getTableResult = function (pageIndex, pageSize) { var index = layer.load(2, { content: '加载中..... ...

  6. html5中的SessionStorage 和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  7. Java对称与非对称加密解密,AES与RSA

    加密技术可以分为对称与非对称两种. 对称加密,解密,即加密与解密用的是同一把秘钥,常用的对称加密技术有DES,AES等 而非对称技术,加密与解密用的是不同的秘钥,常用的非对称加密技术有RSA等 为什么 ...

  8. 兼容主流浏览器的css渐变色

    网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和 和Safari都支持的 ...

  9. 安装Ubuntu后一些准备

    一些基础 安装的时候,先不选镜像就可以避开简易安装. 更改root密码:sudo passwd root 更改源,更新,不行就打断在更新 安装vim 改为unity模式,安装VMware Tools, ...

  10. js td innerHTML

    用value不好使,用innerHTML可以.JS:document.getElementById("aa").innerHTML="单元格"; body:&l ...