首页 > 代码库 > js动态添加删除行，兼容ie和火狐

js动态添加删除行，兼容ie和火狐

2024-07-19 09:14:01   221人阅读

<!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="http://www.mamicode.com/‘+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="http://www.mamicode.com/删除" 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="http://www.mamicode.com/‘+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="http://www.mamicode.com/删除" 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="http://www.mamicode.com/添加" 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="http://www.mamicode.com/添加" onclick="addXin()" style="width:40"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

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

 

js动态添加删除行，兼容ie和火狐


联系
我们