动态增加删除表格行(兼容IE/FF)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动态增删表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com
var rowIndex = 0;
function addLine(obj)
{
var objSourceRow = obj.parentNode.parentNode;
var objTable = obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value == '增加')
{
rowIndex++;
var objRow = objTable.insertRow(rowIndex);
var objCell;
objCell = objRow.insertCell(0);
objCell.innerHTML = " ";
objCell = objRow.insertCell(1);
objCell.innerHTML = objSourceRow.cells[1].innerHTML;
objCell = objRow.insertCell(2);
objCell.innerHTML = objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
}
else
{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
function removeLine()
{
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td>
<select name="select">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select>
</td>
<td>
<input name="basicinfo" type="text" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)">
</td>
</tr>
<tr>
<td>其它信息</td>
<td> </td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>动态增删表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com
var rowIndex = 0;
function addLine(obj)
{
var objSourceRow = obj.parentNode.parentNode;
var objTable = obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value == '增加')
{
rowIndex++;
var objRow = objTable.insertRow(rowIndex);
var objCell;
objCell = objRow.insertCell(0);
objCell.innerHTML = " ";
objCell = objRow.insertCell(1);
objCell.innerHTML = objSourceRow.cells[1].innerHTML;
objCell = objRow.insertCell(2);
objCell.innerHTML = objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
}
else
{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
function removeLine()
{
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td>
<select name="select">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select>
</td>
<td>
<input name="basicinfo" type="text" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)">
</td>
</tr>
<tr>
<td>其它信息</td>
<td> </td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
作者：ChenLuLouis
出处：http://www.cnblogs.com/chenlulouis/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-chenlulouisBlog。
posted on 2009-10-19 13:54 chenlulouis 阅读(271) 评论(0) 编辑 收藏 举报
