最近公司项目要实现动态增加删除表格，以下这个例子供大家参考学习。
<html>
<head>
<title>管理中心</title>
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<link href="img/style.css" type=text/css rel=stylesheet>
<script>
var table_count = 0;
function doAdd(){
var viewTable = document.getElementById("myTable");
var oneTr = document.createElement("TR");
var oneTd = document.createElement("TD");
oneTd.align="center";
oneTd.innerHTML = "<TABLE id='bt_table_" + table_count + "'><tr><td rowspan='2' align='center'>经营状况</td><td colspan='6' align='center'><strong>2005年</strong></td></tr><tr><td align='center'>合计</td><td width='78' align='center'>增长%</td><td width='71' align='center'>直营</td><td width='74' align='center'>增长%</td><td width='73' align='center'>加盟</td><td width='72' align='center'>增长%</td></tr><tr><td align='center'>营业额(万元)</td><td align='center'><input name='textfield5' type='text' value='' size='5' /></td><td align='center'><input name='textfield8' type='text' value='' size='5' /></td><td align='center'><input name='textfield12' type='text' value='' size='5' /></td><td align='center'><input name='textfield14' type='text' value='' size='5' /></td><td align='center'><input name='textfield17' type='text' value='' size='5' /></td><td align='center'><input name='textfield20' type='text' value='' size='5' /></td></tr><tr><td align='center'>利润额(万元)</td><td align='center'><input name='textfield6' type='text' value='' size='5' /></td><td align='center'><input name='textfield9' type='text' value='' size='5' /></td><td align='center'><input name='textfield11' type='text' value='' size='5' /></td><td align='center'><input name='textfield15' type='text' value='' size='5' /></td><td align='center'><input name='textfield18' type='text' value='' size='5' /></td><td align='center'><input name='textfield21' type='text' value='' size='5' /></td></tr><tr><td align='center'>税 金(万元)</td><td align='center'><input name='textfield7' type='text' value='' size='5' /></td><td align='center'><input name='textfield10' type='text' value='' size='5' /></td><td align='center'><input name='textfield13' type='text' value='' size='5' /></td><td align='center'><input name='textfield16' type='text' value='' size='5' /></td><td align='center'><input name='textfield19' type='text' value='' size='5' /></td><td align='center'><input name='textfield22' type='text' value='' size='5' /></td></tr></TABLE>";
oneTr.appendChild(oneTd);
viewTable.tBodies[0].appendChild(oneTr);
table_count++;
}
//删除指定的行
function doDelete()
{
var myTable = document.getElementById("myTable");
myTable.deleteRow(table_count-1);
table_count--;
}
</script>
</head>
<body class="main_body" >
<table id="myTable" border="1"></table>
<table width="100%" border="0" cellspacing="1" cellpadding="3" align=center class="tableBorder">
<tr>
<td height=25 align="right" class="Forumrow"> </td>
<td height=25 class="Forumrow" colspan="3" align="right"><input type="button" name="Submit6" value="添 加" onclick="doAdd()">
<input type="button" name="Submit62" value="取 消" onclick="doDelete()">
<input type="submit" name="Submit622" value="返 回"> </td>
</tr>
</table>
posted on 2006-07-12 17:12
fish的Blog 阅读(294)
评论(0) 编辑 收藏 所属分类:
JavaScript