如何实现单击一个按钮，使TABLE增加一行！
代码如下：
<%@ page
import = "java.sql.*"
%>
<table align="center">
<form action = "/exportcreate_s.jsp" method = "post" name = "selectuser" >
<TR>
<TD id = "header" colspan="2" align="right">Select Bargain</TD>
</TR>
<tr>
<td colspan="2" id="footer" align="center">
<input type = button name = "add" value = " add" id="button" >
</td>
</tr>
</form>
</table>
问题点数：50、回复次数：12Top
1 楼runmin（）回复于 2002-04-02 08:38:52 得分 10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
.ti
{
color: white;
background-color: gray;
};
.good
{
background-color: lightskyblue;
}
</style>
<BODY>
<div id=tmp></div>
<script>
var tableTitle = new Array("编号","姓名","年龄","性别","职业","备注"); //标题
var tabFieldWidth = new Array(100,200,100,100,100,100); //宽度
var tr1 = new Array("1","run","年龄","性别","职业","备注");
var tr2 = new Array("2","zhao","年龄","性别","职业","备注");
var tr3 = new Array("3","wang","年龄","性别","职业","备注");
var tr4 = new Array("4","li","年龄","性别","职业","备注");
var data = new Array(tr1,tr2,tr3,tr4); //数据数组(2维)
function createTab( targetElement, tabTitle, tabFieldWidth, tabData, titleStyle, bodyStyle )
{
targetElement.insertAdjacentHTML("AfterBegin","<table id=resultTab><tbody></tbody></table>");
resultTab.insertRow(0);
var currentTR = resultTab.all.tags("tr")[0];
currentTR.className = titleStyle;
for ( var i=0; i < tabTitle.length; i++ )
{
currentTR.insertCell();
currentTR.all[i].width = tabFieldWidth[i];
currentTR.all[i].innerHTML = tabTitle[i];
}
for ( var j=1; j <= tabData.length; j++ )
{
resultTab.insertRow(j);
var currentTR = resultTab.all.tags("tr")[j];
if ((j%2)!=(1))
{
currentTR.className = bodyStyle;
}
for ( var i=0; i < tabTitle.length; i++ )
{
currentTR.insertCell();
currentTR.all[i].innerText = tabData[j-1][i];
}
}
};
createTab( tmp, tableTitle, tabFieldWidth, data, "ti", "good" );
</script>
</BODY>
</HTML>
Top
2 楼xietangz（）回复于 2002-04-02 09:04:30 得分 0
我说的是单击FORM的一个按钮，比如
<table>
<form>
<tr><td>this is a test!</td></tr>
<tr><td><input type = button name = add value = add></td></tr>
</form>
</table>
单击add按钮后使table增加一行如：
<table>
<form>
<tr><td>this is a test!</td></tr>
<tr><td>new add rows!</td></tr>
<tr><td><input type = button name = add value = add></td></tr>
</form>
</table>
Top
3 楼karma（无为MS MVP）回复于 2002-04-02 09:04:54 得分 0
try something like
<table align="center" id="mytbl">
<form action = "/exportcreate_s.jsp" method = "post" name = "selectuser" >
<TR>
<TD id = "header" colspan="2" align="right">Select Bargain</TD>
</TR>
<tr>
<td colspan="2" id="footer" align="center">
<input type = button name = "add" value = "add" id="button" onclick="newRow()">
</td>
</tr>
</form>
</table>
<script language="javascript">
function newRow()
{
var tbl = document.all("mytbl");
var row = tbl.insertRow(1);
for (var i=0; i < tbl.rows[0].cells.length; i++)
{
var cell = row.insertCell();
cell.innerHTML = "<b>" + ((i+1)*10) + "</b>";
}
}
</script>
Top
4 楼xietangz（）回复于 2002-04-02 09:19:26 得分 0
感谢两位的回答。
两位确实是高手级的人物！
如何实现减去一行呢！根据鼠标所在位置的行？
Top
5 楼8988（晓月）回复于 2002-04-02 09:26:09 得分 10
我的一个外挂程序，内容太大，分两次贴出来
<html>
<head>
<style>
<!--
td { font-size: 10pt }
-->
</style>
</head>
<body topmargin="0" leftmargin="0">
<table border="1" width="600" cellspacing="0" cellpadding="0" bordercolor="#C8DCF0">
<tr>
<td width="100%" background="img/Board.gif" style="font-size: 11pt; color: #800000" align="center" height="18">加 入 表 格 框</td>
</tr>
<tr>
<td width="100%" style="padding: 5">
<table border="1" width="586" bordercolor="#C8DCF0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="260">
<IFRAME id=ifr frameborder=0 scrolling=no height=100% width=100% src=""></IFRAME>
</td>
</tr>
<tr>
<td width="582" style="color: #800000" align="center"><span id=tabXY>第1行/第1列</span>
<font color="#FF0000">文字属性请在完成表格编辑后，用“字”工具修改</font>
</td>
</tr>
<tr>
<td width="582">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<td width="19%" height="18">表格宽<input id=tabw onchange="tabWidth()" type="text" name="T1" size="3" value="100%"></td>
<td width="20%" height="18">第<span id=colw1>1</span>列宽<input id=colw2 onchange="colWidth()" type="text" name="T1" size="3" value="100%"></td>
<td width="20%" height="18">第<span id=roww1>1</span>行高<input id=roww2 onchange="rowWidth()" type="text" name="T1" size="3" value="14"></td>
<td width="20%" height="18" align="right"><img border="0" src="img/insrow.gif" onclick=insTab(1) style="cursor:hand"><img border="0" src="img/inscol.gif" onclick=insTab(0) style="cursor:hand"><img border="0" src="img/delrow.gif" style="cursor:hand" onclick=insTab(4)><img border="0" src="img/delcol.gif" style="cursor:hand" onclick=insTab(3)></td>
<td width="20%" height="18" align="center"><img border="0" src="img/dels.gif" style="cursor:hand" onclick=Deltxt()></td>
</table>
</td>
</tr>
<tr>
<td width="582">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="18">
<tr>
<td width="15%" align="right">左上边框颜色</td>
<td width="5%" bgColor="" id=clr1 onclick=setClr(clr1,"borderColorLight") style="border: 4 outset #C8DCF0"> </td>
<td width="7%"><img border="0" src="img/def.gif" style="cursor:hand" onclick=defClr(clr1,"borderColorLight")></td>
<td width="15%" align="right">右下边框颜色</td>
<td width="5%" bgColor="" id=clr2 onclick=setClr(clr2,"borderColorDark") style="border: 4 outset #C8DCF0"> </td>
<td width="7%"><img border="0" src="img/def.gif" style="cursor:hand" onclick=defClr(clr2,"borderColorDark")></td>
<td width="12%" align="right">背景颜色</td>
<td width="5%" bgColor="" id=clr3 onclick=setClr(clr3,"bgColor") style="border: 4 outset #C8DCF0"> </td>
<td width="8%"><img border="0" src="img/def.gif" style="cursor:hand" onclick=defClr(clr3,"bgColor")></td>
<td width="22%">边框粗细<select size="1" name="ZH" onchange="ifr.tab.border=this.value">
<option selected value>普通</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="582" align="center" colspan="2"><img border="0" src="img/Ok1.gif" style="cursor:hand" onclick=doOK()> <img border="0" src="img/Cancel1.gif" style="cursor:hand" onclick=parent.close()></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" background="img/Board.gif" style="color: #008000" align="center" height="18">Copyright © 2002 XY123. All Rights Reserved</td>
</tr>
</table>
<script>
ifr.document.write ("<head><style>input{border-style: double #800080; border-width: 2;width:100%} td{font-size:12pt}</style></head>");
ifr.document.write ("<body topmargin=2 leftmargin=2>");
ifr.document.write ("<table border=1 id=tab width=100%><tr><td height=14 width=100% onclick=parent.TabXY(this.cellIndex,this.parentElement.rowIndex)><input id=tdtxt></td></tr></table>");
ifr.document.write ("</body>");
xx=0;
yy=0;
cols=1;
rows=1;
oldbgClr="";
TabXY(xx,yy);
function TabXY(x,y){
if (x==xx && y==yy) return;
s=Trim(ifr.tdtxt.value);
if(s=="") s=" ";
ifr.tab.rows(yy).cells(xx).innerText=s;
xx=x;
yy=y;
Top
6 楼8988（晓月）回复于 2002-04-02 09:28:34 得分 0
s=ifr.tab.rows(yy).cells(xx).innerText;
if (s==" ") s="";
ifr.tab.rows(yy).cells(xx).innerHTML="<input id=tdtxt>";
ifr.tdtxt.value=s;
ifr.tdtxt.style.backgroundColor=ifr.tab.bgColor;
ifr.focus();
ifr.tdtxt.focus();
tabXY.innerText="第"+(y+1)+"行/第"+(x+1)+"列";
colw1.innerText=x+1;
colw2.value=ifr.tab.rows(yy).cells(xx).width;
roww1.innerText=y+1;
roww2.value=ifr.tab.rows(yy).cells(xx).height;
}
function onChg(){
s=Trim(XYvar.value);
if (s=="") s=" ";
ifr.tab.rows(yy).cells(xx).innerText=s;
//XYvar.focus();
}
function insTab(mm){
switch(mm){
case 0:
cols++;
colprset=parseInt(ifr.tab.rows(yy).cells(xx).width);
h=ifr.tab.rows(yy).cells(xx).height;
td1w=Math.ceil(colprset/2);
td2w=colprset-td1w;
for(i=0;i<rows;i++) {
ifr.tab.rows(i).cells(xx).width=td1w+"%";
ifr.tab.rows(i).insertCell(xx+1);
}
ifr.tab.outerHTML=ifr.tab.outerHTML.replace(/<TD><\/TD>/g,"<td height="+h+" width="+td2w+"% height=14 onclick=parent.TabXY(this.cellIndex,this.parentElement.rowIndex)> </td>");
break;
case 1:
h=ifr.tab.rows(yy).cells(xx).height;
trs="<TR>";
for (i=0;i<cols;i++){
p=ifr.tab.rows(0).cells(i).width;
trs+="<td height="+h+" width="+p+" onclick=parent.TabXY(this.cellIndex,this.parentElement.rowIndex)> </td>";
}
trs+="</TR>";
ifr.tab.insertRow(yy+1);
ifr.tab.outerHTML=ifr.tab.outerHTML.replace(/<TR><\/TR>/g,trs);
rows++;
break;
case 3:
if (cols==1) return;
ii=(xx==0)?xx+1:xx-1;
tdw=parseInt(ifr.tab.rows(yy).cells(xx).width)+parseInt(ifr.tab.rows(yy).cells(ii).width);
for(i=0;i<rows;i++) {ifr.tab.rows(i).cells(ii).width=tdw+"%";ifr.tab.rows(i).deleteCell(xx);}
cols--;
if (xx>=cols) xx--;
ifr.tab.rows(yy).cells(xx).innerHTML="<input id=tdtxt>";
break;
case 4:
if (rows>1) {
ifr.tab.deleteRow(yy);
rows--;
if (yy>=rows) yy--;
}
ifr.tab.rows(yy).cells(xx).innerHTML="<input id=tdtxt>";
}
}
Top
7 楼8988（晓月）回复于 2002-04-02 09:29:40 得分 0
function ChgColw(){
Tw=tabw.value;
}
function Deltxt(){
for(i=0;i<rows;i++)
for(j=0;j<cols;j++){
ifr.tab.rows(i).cells(j).innerHTML=" ";
}
ifr.tab.rows(yy).cells(xx).innerHTML="<input id=tdtxt>";
}
parent.returnValue="";
parent.dialogHeight="435px";
parent.dialogWidth ="606px";
function Trim(strings){return strings.replace(/(\s+)$/g,"").replace(/^(\s+)/g,"");}
function doOK(){
s=Trim(ifr.tdtxt.value);
if(s=="") s=" ";
ifr.tab.rows(yy).cells(xx).innerText=s;
y=ifr.tab.rows.length;
x=ifr.tab.rows(0).cells.length;
s="[TAB";
b=ifr.tab.border;
if (b!=1) s+=" Line="+b;
b=ifr.tab.bgColor;
if (b!="") s+=" bgColor="+b;
b=ifr.tab.borderColorLight;
if(b!="") s+=" Light="+b;
b=ifr.tab.borderColorDark;
if(b!="") s+=" Dark="+b;
s+=" Width="+ifr.tab.width+"]";
cr=String.fromCharCode(13,10);
for(i=0;i<y;i++){
s+=cr+"[TR]";
for(j=0;j<x;j++){
s+="[TD";
b=ifr.tab.rows(i).cells(j).width;
if(b!="") s+=" Width="+b;
b=ifr.tab.rows(i).cells(j).height;
if(b!="") s+=" Height="+b;
b=ifr.tab.rows(i).cells(j).bgColor;
if(b!="") s+=" bgColor="+b;
s+="]"+ifr.tab.rows(i).cells(j).innerText+"[/TD]";
}
s+="[/TR]";
}
s+=cr+"[/TAB]";
returnValue=s;
parent.close();
}
function defClr(obj1,obj2){
obj1.bgColor="";
eval("ifr.tab."+obj2+"=''");
}
function setClr(obj1,obj2){
retclr=window.showModalDialog("getclr.htm",obj1.bgColor,"status=no;help=no");
if(retclr!="" && retclr!=null) {
obj1.bgColor=retclr;
eval("ifr.tab."+obj2+"='"+retclr+"'");
}
}
function doClr1(){
ret=window.showModalDialog("getclr.htm",clr1.bgColor,"status=no;help=no");
if (ret!="" && ret!=null) {clr1.bgColor=ret;ifr.tab.borderColorLight=ret;}
}
function rowWidth(){
w=parseInt(roww2.value);
if (isNaN(w) || w>400 || w<1) w=ifr.tab.rows(yy).cells(xx).height;
roww2.value=w;
for(i=0;i<cols;i++) ifr.tab.rows(yy).cells(i).height=w;
}
function colWidth(){
w=parseInt(colw2.value);
if (isNaN(w) || w>100 || w<1) w=ifr.tab.rows(yy).cells(xx).width;
else w=w+"%";
colw2.value=w;
for(i=0;i<rows;i++) ifr.tab.rows(i).cells(xx).width=w;
}
function tabWidth(){
w=parseInt(tabw.value);
ww=ifr.tab.width;
if (isNaN(w) || w>100 || w<1) w=ifr.tab.width;
else w=w+"%";
tabw.value=w;
ifr.tab.width=w;
}
</script>
</body>
</html>Top
8 楼karma（无为MS MVP）回复于 2002-04-02 09:36:23 得分 10
to delete a row, try something like
<script language="javascript">
function document.onclick()
{
if (event.srcElement.tagName == "TD")
{
var row = event.srcElement.parentElement;
var rowIndex = row.rowIndex;
var tbl = row.parentElement;
while (tbl.tagName != "TABLE" && tbl.tagName != "BODY")
{
tbl = tbl.parentElement;
}
if (tbl.tagName == "TABLE")
{
tbl.deleteRow(rowIndex);
}
}
}
</script>Top
9 楼weidegong（weidegong）回复于 2002-04-02 09:46:26 得分 0
点击左边的表格删除所在行
----------------------------------------------
<HTML>
<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
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>
Top
10 楼weidegong（weidegong）回复于 2002-04-02 09:47:46 得分 20
续。。
－－－－－－－－－－－－－－
<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 &