最近公司項目要實現動態增加刪除表格，以下這個例子供大家參考學習。
<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 閱讀(298)
評論(0) 編輯 收藏 所屬分類:
JavaScript