使用Javascript动态增加，删除表格（使用DHTML对象模型）
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<script language="javascript">
function deleteRow()//刪除当前前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.mytable.deleteRow(currRowIndex);//table10--表格id
}
function addRow(){
var tableObj=document.getElementById("mytable");
var newRowObj=tableObj.insertRow(tableObj.rows.length);
var newColName=newRowObj.insertCell(newRowObj.cells.length);
var newColAge=newRowObj.insertCell(newRowObj.cells.length);
var newColButton=newRowObj.insertCell(newRowObj.cells.length);
newColName.innerHTML=document.getElementById("newName").value;
newColAge.innerHTML=document.getElementById("newAge").value;
newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow();">';
}
</script>
</head>
<body>
<table width="100%" id="mytable" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
<input type="text" name="name" id="newName" />
<input type="text" name="age" id="newAge"/>
<input type="button" onclick="addRow();" value="新增"/>
</body>
</html>
来自:http://esffor.javaeye.com/blog/168191
///----------------------单行的增加和删除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=GB18030">
<META name="GENERATOR" content="IBM WebSphere Studio">
<TITLE>cfbcard.html</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
var j_1 = 1;
function add_row_family(){
newRow=document.all.family.insertRow(-1)
newcell=newRow.insertCell()
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<input type='text' name='familyname"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
newcell.innerHTML="<SELECT name='thesistogether"+j_1+"'>"+
" <option value='请选择'>"+
" 请选择"+
" </option>"+
" <option value='1'>"+
" 111"+
" </option>"+
" <option value='2'>"+
" 222"+
" </option>"+
" <option value='3'>"+
" 333"+
" </option>"+
" <option value='4'>"+
" 444"+
" </option>"+
" <option value='5'>"+
" 555"+
" </option>"+
"</SELECT>";
for(var i = 0;i<12;i++){
newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
newcell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
}
newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<a href='javascript:delTableRow(/""+1+"/")'>删除</a>";
newcell.innerHTML="<input type='button' value='删除' onClick='deleteCurrentRow()'>";
j_1++;
document.all.j_1.value=j_1;
document.all.family.focus();
}
function deleteCurrentRow()//刪除当前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.family.deleteRow(currRowIndex);//table10--表格id
}
</script>
<body bgcolor="#F5F1F5" >
<form name="form1" method="post" action="" onsubmit="">
<table>
<tr>
<td>
<table id="family" style="width:100%" border="1" cellspacing="1" cellpadding="2" class="tbMain">
<tr>
<td class="td_name">111</td>
<td class="td_name">222</td>
<td class="td_name">333</td>
<td class="td_name">444</td>
<td class="td_name">555</td>
<td class="td_name">666</td>
<td class="td_name">777</td>
<td class="td_name">888</td>
<td class="td_name">999</td>
<td class="td_name">000</td>
<td class="td_name">123</td>
<td class="td_name">456</td>
<td class="td_name">789</td>
<td class="td_name"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right"><INPUT type="button" name="add" onclick="add_row_family();" value="添加"></td>
</tr>
</table>
</form>
</body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////多行的增加，减少
<HTML>
<HEAD>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<script language="javascript">
function $(id) {
return document.getElementById(id);
}
</script>
</HEAD>
<body bgcolor=#EFFFF5 leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0>
<center>
<center>
<table width=100% border=0 cellspacing=0 cellpadding=0>
<tr bgcolor=#d0d0d0>
<td width=9 background=''> </td>
<td class=content height=100 valign=top> <table width=100% border=0 cellspacing=2 cellpadding=2> <tr>
<td>
<form action="into.php" method="post" enctype="multipart/form-data" name="articleinsert" id="articleinsert">
<A id=addattachlink onClick="newnode = $('kao').cloneNode(true); $('articleinsert').appendChild(newnode)" href="#">[增加] </A>
<!--<A id=addattachlink onClick="$('attachbody').childNodes.length > 1 && $('attachbody').lastChild ? $('attachbody').removeChild($('attachbody').lastChild) : 0;" href="#">[减少] </A>-->
<A id=addattachlink onClick="$('articleinsert').childNodes.length > 4 ? $('articleinsert').removeChild($('articleinsert').lastChild):0;" href="#">[减少] </A>
<table border=0 width=100% cellPadding=4 cellSpacing=1 id="kao">
<tr bgcolor=#38C972 align=center>
<td nowrap> </td>
</tr>
<tr bgcolor=#9FF1B8 align=center>
<td> <table width="100%" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td width="24%">
<div align="right"> </div> </td>
<td width="76%"></td>
</tr>
<TBODY id=attachbody>
<tr>
<td width="24%" bgcolor="#99CC33">
<div align="right">目的地： </div> </td>
<td width="76%" bgcolor="#99CC33">
<input name="place" type="text" class="input" id="place" size="50"> </td>
</tr>
<tr>
<td width="24%" bgcolor="#99CC33">
<div align="right">公里数： </div> </td>
<td width="76%" bgcolor="#99CC33">
<input name="km" type="text" class="input" id="km" size="50"> </td>
</tr>
<tr>
<td width="24%" bgcolor="#99CC33">
<div align="right">的士费： </div> </td>
<td width="76%" bgcolor="#99CC33">
<input name="taxi" type="text" class="input" id="taxi" size="50"> </td>
</tr>
</TBODY>
</table>
<input name="word" type="hidden" id="word" value=""> </td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input name="Submit" type="submit" class="button" value="确 定">
<input name="Submit22" type="reset" class="button" value="重 填">
<input name="Submit33" type="button" value="删 除" onClick="$('articleinsert').childNodes.length > 4 ? $('articleinsert').removeChild($('articleinsert').lastChild):0;">
</div> </td>
</tr>
</table> </form> </td>
</tr>
</table>
<table border=1 width=100% cellspacing=0 cellpadding=1 bgcolor=#38C972>
<tr height=22> <td> </td> </tr>
</table>
</td> </tr> </table> </tr> </table>
</center> </center>
</BODY>
</HTML>