<!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. 机器学习入门-DBSCAN聚类算法

    DBSCAN 聚类算法又称为密度聚类,是一种不断发张下线而不断扩张的算法,主要的参数是半径r和k值 DBSCAN的几个概念: 核心对象:某个点的密度达到算法设定的阈值则其为核心点,核心点的意思就是一个 ...

  2. 返回顶部 fixed oncheck(点击按钮）

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

  3. Window Mysql 5.7.18安装

    1:下载地址 https://dev.mysql.com/downloads/mysql/ 点击Community , 然后点击Community Server 位置, 下载 安装包 2: 配置环境变 ...

  4. vue深入了解组件——插槽

    一.插槽内容 Vue实现了一套内容分发的API,这套API基于当前的Web Components规范草案,将 <slot>  元素作为承载分发的内容的出口. 它允许你像这样合成组件: &l ...

  5. 不影响Inspector布局拓展类

    DecoratorEditor.cs using System.Collections.Generic; using System.Linq; using System.Reflection; usi ...

  6. null id in entry (don't flush the Session after an exception occurs)

    null id in entry (don't flush the Session after an exception occurs) 遇到这个异常实属不小心所致,最初看到异出的错误信息时我误认为是 ...

  7. list接口如何使用

    1集合类,在java语言中的java.util包提供了一些集合类,这些集合类又被称作容器. 2区别集合类和数组.(1)数组的长度是固定的,集合的长度是可变的.(2)数组是用来存放基本数据类型的,集合是 ...

  8. Linux iptables 备忘

    iptables主要通过存储在linux内核中的一个个表来控制IP包的.可以想象成excel表格.你可以自定义所需的iptables表.不过已经内置了三张队列表. filter 这是默认的表,包含了内 ...

  9. docker 配置远程访问

    系统: centos 7 Docker version 1.12.6 yum 安装的  #yum install docker docker server在192.168.111.120上 # vim ...

  10. Manta

    安装python客户端: pip install manta import manta as pymanta# cat ${MANTA_PRIVATE_KEY_PATH} | tr '\n' '#' ...