求教javaScript实现表格动态增行删行？

Question

网上的一个例子.
其实你自己最好用GG或在这里搜一搜再提问.
网上有好多这样的例子<BUTTON onclick=add()>add</BUTTON><BUTTON onclick=del()>del</BUTTON><BUTTON onclick=test()>test</BUTTON> 
<TABLE id=t1 border=1>
<TBODY></TBODY></TABLE>
<SCRIPT language=JavaScript>
function add(){
t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';
}
function del(){
var c = document.getElementsByName('tt');
for(var i=0; i<c.length; i++)
if(c[i].checked)
t1.deleteRow(i);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);
}
</SCRIPT>
或者这个:]<FORM name=form1 action="" method=post>
<TABLE cellSpacing=4 cellPadding=4 width="98%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=4 cellPadding=4 width="100%" border=0>
<TBODY>
<TR align=middle>
<TD colSpan=3><FONT size=5><STRONG>医生业绩表</STRONG></FONT></TD></TR>
<TR>
<TD width="35%"><FONT color=#ff0000>[Ctrl+Enter 新增行]</FONT></TD>
<TD width="40%">机构名称: <INPUT class=line1_input readOnly name=OrganizationName> </TD>
<TD align=right width="34%">单位金额:元</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=2 cellPadding=3 width="100%" bgColor=#000000 border=0>
<TBODY>
<TR>
<TD vAlign=top bgColor=#ffffff>
<TABLE height="100%" cellSpacing=1 cellPadding=1 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top>
<TABLE id=DataTable cellSpacing=1 cellPadding=2 width="100%" bgColor=#000000 border=0>
<TBODY>
<TR align=middle bgColor=#e6e6e6>
<TD width=100 bgColor=#e6e6e6 height=28 rowSpan=2>科室</TD>
<TD width=60 bgColor=#e6e6e6 rowSpan=2>医生</TD>
<TD width=60 bgColor=#e6e6e6 rowSpan=2>初诊人数</TD>
<TD width=60 bgColor=#e6e6e6 rowSpan=2>复诊人数</TD>
<TD colSpan=2>治疗人数</TD>
<TD colSpan=4 height=21>营业收入</TD>
<TD colSpan=2>处方量</TD></TR>
<TR align=middle bgColor=#e6e6e6>
<TD align=middle width=35 bgColor=#f7f7f7>初诊</TD>
<TD align=middle width=35 bgColor=#f7f7f7>复诊</TD>
<TD align=middle width=35 bgColor=#f7f7f7>检验</TD>
<TD align=middle width=35 bgColor=#f7f7f7>治疗</TD>
<TD align=middle width=35 bgColor=#f7f7f7>手术</TD>
<TD align=middle width=35 bgColor=#f7f7f7>X光</TD>
<TD width=60 bgColor=#f7f7f7>数量</TD>
<TD width=60 bgColor=#f7f7f7>金额</TD></TR>
<TR id=DataTr align=middle bgColor=#ffffff>
<TD height=28><SELECT name=0SectionOfficeID> <OPTION value="" selected>请选择</OPTION> <OPTION value=15>妇科</OPTION> <OPTION value=16>不孕不育科</OPTION> <OPTION value=17>儿科</OPTION></SELECT> </TD>
<TD><INPUT class=line_input onmouseover=this.focus() size=8 name=0Doctor> </TD>
<TD><INPUT class=line_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onmouseover=this.focus() size=6 name=0FirstDiagnose> </TD>
<TD><INPUT class=line_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onmouseover=this.focus() size=6 name=0SecondDiagnose> </TD>
<TD><INPUT class=line_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onmouseover=this.focus() size=4 name=0FirstTreatmented> </TD>
<TD><INPUT class=line_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onmouseover=this.focus() size=4 name=SecondTreatmented> </TD>
<TD><INPUT class=money_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="GetIncomeSum('0IncomeItem');" onmouseover=this.focus() size=4 name=0IncomeItem7></TD>
<TD><INPUT class=money_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="GetIncomeSum('0IncomeItem');" onmouseover=this.focus() size=4 name=0IncomeItem8></TD>
<TD><INPUT class=money_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="GetIncomeSum('0IncomeItem');" onmouseover=this.focus() size=4 name=0IncomeItem19></TD>
<TD><INPUT class=money_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onkeyup="GetIncomeSum('0IncomeItem');" onmouseover=this.focus() size=4 name=0IncomeItem20></TD>
<TD><INPUT class=line_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onmouseover=this.focus() size=8 name=0RecipeAmonut> </TD>
<TD><INPUT class=money_input onkeypress="javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" onmouseover=this.focus() readOnly size=8 name=0IncomeItemSum> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=2 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD width="60%">说明:处方收入合计=营于收入合计</TD>
<TD width="20%">制表: <INPUT class=line1_input id=CreatedTable2 onmouseover=this.focus() size=8 name=CreatedTable> </TD>
<TD align=right width="22%">填表日期: <INPUT class=line1_input id=CreatedDate3 readOnly size=10 value=2004-07-10 name=CreatedDate> </TD>
<TD align=left width="1%"><INPUT type=hidden value=Submit name=Action2> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<DIV align=center><INPUT onclick=View() type=button value=表格信息 name=button> </DIV></FORM>
<SCRIPT language=JavaScript>
function GetIncomeSum(obj){
var IncomeSum=0
for(i=0;i<document.all.tags("input").length;i++){
var TagName=document.all.tags("input")[i].name.toString()
if (TagName.indexOf(obj)!=-1){
var Income=(document.all.tags("input")[i].name!=obj+"Sum"?document.all.tags("input")[i].value:0)
IncomeSum=eval(IncomeSum)+eval((Income==""?0:Income))
} 
}
document.all(obj+"Sum").value=IncomeSum
//setTimeout("GetIncomeSum('"+obj+"')",1000);
}
function Check(){
if (form1.SectionOfficeID.value==""){
alert("请选择一个科室!");
form1.SectionOfficeID.focus();
return false;
}
if (form1.Doctor.value==""){
alert("医生名称不能为空!");
form1.Doctor.focus();
return false;
}
if (form1.FirstDiagnose.value==""){
alert("初诊人数不能为空!");
form1.FirstDiagnose.focus();
return false;
}
if (form1.SecondDiagnose.value==""){
alert("复诊人数不能为空!");
form1.SecondDiagnose.focus();
return false;
}
if (form1.FirstTreatmented.value==""){
alert("初诊治疗人数不能为空!");
form1.FirstTreatmented.focus();
return false;
}
if (form1.SecondTreatmented.value==""){
alert("复诊治疗人数不能为空!");
form1.SecondTreatmented.focus();
return false;
}
if (form1.RecipeAmonut.value==""){
alert("处方数量不能为空!");
form1.RecipeAmonut.focus();
return false;
}
if (form1.IncomeItemSum.value==""){
alert("金额不能为空!");
form1.IncomeItemSum.focus();
return false;
}
form1.submit()
}
i=1;
function Addrow(){
/*var i=2;
var row = DataTable.insertRow(i+1)
var cell = row.insertCell(0)
cell.innerHTML="jowing test"
row.style.backgroundColor="#FFFFFF"
cell = row.insertCell(1)
cell.innerHTML="<input name='Doctor' type='text' class='line_input' size='8' onmouseover='this.focus()'>"
row.style.backgroundColor="#FFFFFF"
*/
var newTR = DataTr.cloneNode(true);
newTR.id="a"+(++i)
DataTr.parentNode.insertAdjacentElement("beforeEnd",newTR);
RowReset()
}
function RowReset(){
var RowCount=DataTable.rows.length-1
var ReName=RowCount-2
for (var i=0;i<DataTable.rows[RowCount].cells.length;i++){var str=DataTable.rows[RowCount].cells[i].innerHTML
str=(str.replace(/name=[\d]*/i,"name="+ReName)).replace(/value=[\w]*/i,"value=''").replace(/(GetIncomeSum)\(\'0/i,"GetIncomeSum('"+ReName);
DataTable.rows[RowCount].cells[i].innerHTML=str 
}
}
function View(){
for (var r=1;r<DataTable.rows.length;r++){
for (var c=0;c<DataTable.rows[r].cells.length;c++){
alert(DataTable.rows[r].cells[c].innerHTML)
}
}
}
function ShortcutKey(){ 
if((event.ctrlKey)&&(window.event.keyCode==13)) 
Addrow()
} 
document.onkeydown=ShortcutKey; 
</SCRIPT>

Answer 1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>made by meixx</title>
<style type="css/text">
body{font-size:10pt}
</style>
<script language="javascript">
<!--
var curRowSource=null;
var curRowTarget=null;
function selectRow(obj){
if(curRowSource){
curRowSource.style.backgroundColor="#FFFFFF";
curRowSource.style.color="#000000";
}
obj.style.backgroundColor="#3366FF";
obj.style.color="#FFFFFF";
curRowSource=obj;
var btns=document.getElementsByName("btn");
btns[0].disabled=false;
}
function selectRow1(obj){
if(curRowTarget){
curRowTarget.style.backgroundColor="#FFFFFF";
curRowTarget.style.color="#000000";
}
obj.style.backgroundColor="#3366FF";
obj.style.color="#FFFFFF";
curRowTarget=obj;
var btns=document.getElementsByName("btn");
btns[2].disabled=false;
}
function Add(tbSou,tbTar){
var rowSou=null;
var newRow=tbTar.insertRow();
if(tbSou.id=="tbSource"){
rowSou=curRowSource;
newRow.attachEvent("onclick",function(){selectRow1(newRow);});
}
else{
rowSou=curRowTarget;
newRow.attachEvent("onclick",function(){selectRow(newRow);});
}
for(var i=0;i<rowSou.cells.length;i++){
var newCell=newRow.insertCell();
newCell.innerHTML=rowSou.cells[i].innerHTML;
}
tbSou.deleteRow(rowSou.rowIndex);
var btns=document.getElementsByName("btn");
btns[0].disabled=true;
btns[2].disabled=true;
}function AddAll(tbSource,tbTarget){
for(var i=1;;i++){
if(tbSource.rows.length==1) return;
tbSource.rows[1].click();
Add(tbSource,tbTarget);
}

}
function doSubmit(){
SelectAll(frmDisplay.dltTarget);
//frmDisplay.action="";//设置form 提交的action
alert(frmDisplay.action);
//frmDisplay.submit();//取消注释即可,提交上去的options
}
//->
</script>
</head><body>
<table width="550" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
  <tr>
    <td width="250" valign="top">
<table id="tbSource" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;cursor:default" bordercolor="#CCFFFF" width="100%">
<tr>
<td align="center" width="25%">姓名</td><td align="center" width="25%">性别</td><td align="center" width="25%">年龄</td><td align="center" width="25%">身高</td>
</tr>
<tr onclick="selectRow(this)">
<td>冯程程</td><td>女</td><td>22</td><td>167</td>
</tr>
<tr onclick="selectRow(this)">
<td>任盈盈</td><td>女</td><td>19</td><td>168</td>
</tr>
<tr onclick="selectRow(this)">
<td>杨玉环</td><td>女</td><td>18</td><td>162</td>
</tr>
<tr onclick="selectRow(this)">
<td>赢政</td><td>男</td><td>45</td><td>182</td>
</tr>
<tr onclick="selectRow(this)">
<td>项少龙</td><td>男</td><td>28</td><td>176</td>
</tr>
</table>
</td>
    <td width="50" valign="middle">
<br>
<p style="width:100%" align="center"><input name="btn" type="button" value="->" onClick="Add(document.all.tbSource,tbTarget)" title="添加" disabled></p>
<p style="width:100%" align="center"><input name="btn" type="button" value="=>" onClick="AddAll(document.all.tbSource,tbTarget)" title="添加全部"></p>
<p style="width:100%" align="center"><input name="btn" type="button" value="<-" onClick="Add(tbTarget,document.all.tbSource)" title="删除" disabled></p>
<p style="width:100%" align="center"><input name="btn" type="button" value="<=" onClick="AddAll(tbTarget,document.all.tbSource)" title="删除全部"></p>
<br>
</td>
    <td width="250" valign="top">
<form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
<table id="tbTarget" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse" bordercolor="#CCFFFF" width="100%">
<tr>
<td align="center" width="25%">姓名</td><td align="center" width="25%">性别</td><td align="center" width="25%">年龄</td><td align="center" width="25%">身高</td>
</tr>
</table>
</form>
</td>
  </tr>
  <tr>
    <td align="center">作者:梅雪香</td>
    <td align="center">ver:1.0</td>
    <td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">&nbsp;&nbsp;
<input type="button" value="提交" onClick="doSubmit()">2
</td>
  </tr>
</table></body>
</html>
关于日期的常见操作
http://community.csdn.net//Expert/TopicView2.asp?id=4360247&datebasetype=now
js FAQ贴
http://community.csdn.net//Expert/TopicView2.asp?id=4356360&datebasetype=now
DHTML手册,js手册,dom手册下载
http://community.csdn.net//Expert/TopicView2.asp?id=4356325&datebasetype=now