try
<table id="mytable" width="50%" border="2" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" name="textfield"></td>
<td><select name="select">
<option selected>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="插入" onclick="addRow()">
<input name="textfield2" type="text" size="4">
行</td>
<td> </td>
</tr>
</table>
<script language="javascript">
function addRow()
{
var n = textfield2.value;
n = n.replace(/^\s+|\s+$/g,"");
if (n != "" && !isNaN(n))
{
n = parseInt(n);
if (n < 0)
n = -n; var row = mytable.rows[0]; for (var i=0; i < n; i++)
{
var dupRow = row.cloneNode(true);
var lastRow = mytable.rows[mytable.rows.length-1];
mytable.tBodies[0].insertBefore(dupRow,lastRow);
}
}}
</script>
<table id="mytable" width="50%" border="2" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" name="textfield"></td>
<td><select name="select">
<option selected>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="插入" onclick="addRow()">
<input name="textfield2" type="text" size="4">
行</td>
<td> </td>
</tr>
</table>
<script language="javascript">
function addRow()
{
var n = textfield2.value;
n = n.replace(/^\s+|\s+$/g,"");
if (n != "" && !isNaN(n))
{
n = parseInt(n);
if (n < 0)
n = -n; var row = mytable.rows[0]; for (var i=0; i < n; i++)
{
var dupRow = row.cloneNode(true);
var lastRow = mytable.rows[mytable.rows.length-1];
mytable.tBodies[0].insertBefore(dupRow,lastRow);
}
}}
</script>
(1)默认有1行,其中的input和select都命名为name="row1"(好传值),第1行的select列表框中的值是从数据库中用循环读出的(已经实现)
(2)输入要加入行数后,在第一行下加若干行。如:3行,点按钮后则在第1行下加入3行,其中name分别为name=row2,name=row3,name=row4。
注意如果再把行数换为2,点按钮后则第1行下变为2行(共3行)每行中的input和select分别为name=row2,name=row3,而不是在先加的3行下加(共6行)。
<table id="mytable" width="50%" border="2" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" name="row1"></td>
<td><select name="row1">
<option selected>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="插入" onclick="addRow()">
<input name="textfield2" type="text" size="4">
行</td>
<td> </td>
</tr>
</table>
<input type="submit">
</form>
<script language="javascript">
function addRow()
{
var n = document.all("textfield2").value;
n = n.replace(/^\s+|\s+$/g,"");
if (n != "" && !isNaN(n))
{
n = parseInt(n);
if (n < 0)
n = -n;
var rows = mytable.rows;
var nlength = rows.length;
if ( nlength > 2)
{
for (var i=1; i <= nlength-2; i++)
{
mytable.tBodies[0].removeChild(rows[1]);
}
} var row = rows[0];
var lastRow = mytable.rows[mytable.rows.length-1];
for (var i=0; i < n; i++)
{
var dupRow = row.cloneNode(true);
dupRow.getElementsByTagName("INPUT")[0].name = "row" + (i+2);
dupRow.getElementsByTagName("SELECT")[0].name = "row" + (i+2);
mytable.tBodies[0].insertBefore(dupRow,lastRow);
}
}
}
</script>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableData {
BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataSel {
BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataOver {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.controlPanel {
BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.controlPanelMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.delMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.scheduleButtonVisible {
BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px
}
</STYLE>
<SCRIPT language=javascript>
var modified=0
var currentLine=-1//该变量似乎保存"ln"属性;lightOn函数中line记录实际行数
var line=-1;
function lightOn(ln)
{
if (ln==null)
ln=parseInt(event.srcElement.ln,10)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==ln)
line=i
cln=currentLine
oldLine=-1
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==cln)
oldLine=i
if (line==oldLine)
return
//if td <0 then only clear all title
if (line>0)
{
document.all.tdt[line].className="tableDataHit";
document.ecform("date")[line].className="tableDataHit";
document.ecform("diagnosis")[line].className="tableDataHit";
document.ecform("medication")[line].className="tableDataHit";
if (oldLine>0)
{
document.all.tdt[oldLine].className="tableData";
document.ecform("date")[oldLine].className="tableData";
document.ecform("diagnosis")[oldLine].className="tableData";
document.ecform("medication")[oldLine].className="tableData";
}
currentLine=ln
}
}
function delIt()
{
line=parseInt(event.srcElement.ln,10)
if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
{
if (document.ecform.diagnosis[i].value.length>0 || document.ecform.medication[i].value.length>0 || document.ecform.date[i].value.length>0)
if (!confirm("Are you sure you want to delete this record?"))
return
PLList.deleteRow(i)
}
}
function modifiedIt(field)
{
// field.value=checkText(field.value);
modified=1
line=parseInt(event.srcElement.ln,10)
if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
document.ecform.edit[i].value=1
}
function newHospitalVisit()
{
newRow=PLList.insertRow(PLList.rows.length);
newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="#e0e0e0";
newRow.className="tableData";
newRow.onclick=lightOn;c1=newRow.insertCell(0);
c1.id="delItem";
c1.ln=allCount;
c1.className="scheduleButtonVisible";
c1.onclick=delIt;
c1.onmouseover=mouseOver;
c1.onmouseout=mouseOut;
c1.innerHTML="<input type=hidden name=PLID value=0><input type='hidden' name='edit' value=0>";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.innerHTML="<input type=text size=10 maxlength=10 name=date ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
c3=newRow.insertCell(2);
c3.ln=allCount;
c3.innerHTML="<input type=text size=25 maxlength=50 name=diagnosis ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
c4=newRow.insertCell(3);
c4.ln=allCount;
c4.innerHTML="<input type=text size=58 maxlength=100 name=medication ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
</SCRIPT>
--------------接下面
</HEAD>
<BODY bgColor=white>
<FORM method=post name=ecform>
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<DIV id=div1
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px">
<TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">
<TBODY>
<TR bgColor=#0a6846 id=tdt>
<TH width=10><FONT color=white>X
<INPUT name=PLID type=hidden>
<INPUT
name=edit type=hidden>
</FONT></TH>
<TH width="10%">
<INPUT name=date type=hidden>
<FONT color=white>Date </FONT>
<TH width="30%">
<INPUT name=diagnosis type=hidden>
<FONT
color=white>Diagnosis </FONT>
<TH width="60%">
<INPUT name=medication type=hidden>
<FONT
color=white>Medication </font>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="1"><FONT size=2>
<INPUT name=PLID type=hidden
value=54 ln="1">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="1">
<INPUT class=tableData maxLength=10 name=date
onkeyup=modifiedIt(this) size=10 ln="1">
</TD>
<TD ln="1">
<INPUT class=tableData maxLength=50 name=diagnosis
onkeyup=modifiedIt(this) size=25 value="what do you think of it?"
ln="1">
</TD>
<TD ln="1">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="like it?" ln="1">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="2">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="2"><FONT size=2>
<INPUT name=PLID type=hidden
value=55 ln="2">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="2">
<INPUT class=tableData maxLength=10 name=date
onkeyup=modifiedIt(this) size=10 value=01/01/1999 ln="2">
</TD>
<TD ln="2">
<INPUT class=tableData maxLength=50 name=diagnosis
onkeyup=modifiedIt(this) size=25 value="it`s a test" ln="2">
</TD>
<TD ln="2">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="how about it?" ln="2">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="3">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="3"><FONT size=2>
<INPUT name=PLID type=hidden
value=56 ln="3">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="3">
<INPUT class=tableData maxLength=10 name=date
onkeyup=modifiedIt(this) size=10 value=02/01/2000 ln="3">
</TD>
<TD ln="3">
<INPUT class=tableData maxLength=50 name=diagnosis
onkeyup=modifiedIt(this) size=25 value="another test" ln="3">
</TD>
<TD ln="3">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 ln="3">
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
allCount=4
</SCRIPT>
<TABLE align=center border=1 borderColorDark=white borderColorLight=gray
cellPadding=1 cellSpacing=1 class=controlPanel cols=4 rules=all width="100%"
nowrap>
<TBODY>
<TR>
<TD align=middle class=controlPanel onclick=newHospitalVisit()
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><FONT size=2>Add a New
Record, click here</FONT></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
</BODY>
</HTML>
--------------
这种情况最好用集合,如n个td都叫row
则可以用row[0],row[1]来指定
可以通过。:-) 应用时候最好加个 最大rows限制,最好使用post方法来提交数据。
因为我 在测试时候发现,get方式容易超长。 请结贴拉。