如何通过点击按钮，在表格中生成新的一行？
要输入一组数据，点击按钮“增加记录”，就生成一行输入框或者下拉框，输入数据后，就保存到数据库里面，问题是，点击“增加记录”按钮后，该怎么样才能在原来的输入行下面，再增加一行。我用的是jsp+struts。
请指教或者提供资料出处，非常感谢。
问题点数：100、回复次数：27Top
1 楼CristinNa（土匪）回复于 2006-04-24 13:35:38 得分 0
这个问题不好做，给你个建议，点击按钮后通过action在数据库中添加一条相同的数据，这样就在页面上增加了一行Top
2 楼CristinNa（土匪）回复于 2006-04-24 13:36:08 得分 0
逆向思维Top
3 楼rickhunterchen（千山鸟飞绝）回复于 2006-04-24 14:03:03 得分 0
看看这里;
http://community.csdn.net/Expert/TopicView3.asp?id=4650697Top
4 楼lip009（深蓝忧郁）回复于 2006-04-24 14:11:43 得分 0
用层控制最好，先做好一个层，里边有添加信息的输入框和下拉框以及提交按钮，刚开始不让层显示，然后在点增加按钮的时候让该层显示就OK了。Top
5 楼iwlk（http://www.ChinaFedora.cn/ fedora论坛）回复于 2006-04-24 14:17:05 得分 10
<table width="200" border="1">
<tr>
<td>1</td>
<td> 2</td>
<td> 3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr style="display:none " id="c06_net">
<td><input name="" type="text"></td>
<td><input name="" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</table>
<input type="button" onClick="document.all('c06_net').style.display='';" name="Submit" value="添加">Top
6 楼kongxiangli（笑看红尘）回复于 2006-04-24 14:27:29 得分 10
//增加表格
oRow = oTable.insertRow(oTable.rows.length);
oRow.runtimeStyle.backgroundColor = "#e8e9fc";
oRow.align="center";
oCell0 = oRow.insertCell();
oCell1 = oRow.insertCell();
oCell2 = oRow.insertCell();
oCell3 = oRow.insertCell();
oCell4 = oRow.insertCell();
oCell5 = oRow.insertCell();
//oCell6 = oRow.insertCell();
//文字
oCell0.innerText = "123";
Top
7 楼wsk_228（qing_feng）回复于 2006-04-24 15:11:29 得分 0
rickhunterchen(千山鸟飞绝) 给你链接应该能解决吧Top
8 楼yushizi2（玉石子）回复于 2006-04-24 15:20:09 得分 0
谢谢你们！
CristinNa(深白色）的建议我考虑过，只是觉得这样操作比较麻烦，因为数据输入到控件后不能立即被插入数据库，为了刷新时的保存，可能要另外建立一张表。
iwlk(第六世纪 MSN:c06@c06.net)的方法很讨巧，很有意思，谢谢。
rickhunterchen(千山鸟飞绝) 和kongxiangli(笑看红尘) 的方法基本差不多，谢谢。
但是这些方法都不能刷新页面，否则插入的行都会消失了。
Top
9 楼zhiyuzhe（每晚夜里自我独行,随处荡,多冰冷）回复于 2006-04-24 15:28:46 得分 10
可以用js来实现:
<script language="javascript" src="/js/onlinetable/onlineEditTable.js"></script>
<script language=JavaScript>
具体你可以查一下js的资料
Top
10 楼yunqing1028（-_-）回复于 2006-04-24 16:08:28 得分 0
用js实现，代码自己写就可以了，不是很难吧，我见别人写过Top
11 楼feng1071（飞儿）回复于 2006-04-24 16:41:14 得分 0
用JS怎么样？？如果你想用，我可以给你个例子Top
12 楼Timsole（一陀智慧）回复于 2006-04-24 17:01:48 得分 0
关注一下Top
13 楼power_zl（晨光）回复于 2006-04-24 19:09:17 得分 0
我现在也遇到了这个问题
一个主页面中iframe了一个页（该页用通过一个二级select取值，一个button来动态添加行，物品信息存入数据库中，并动态显示）
这时，在主页中，若对这个iframe页进行了操作，但最终没提交主页的表单，这样iframe页中就把相关信息已经存到表中了，请问如何解决这个问题？
忘大家赐教，谢谢！~
Email：power_zl@126.comTop
14 楼yushizi2（玉石子）回复于 2006-04-25 00:39:10 得分 0
这些记录我怎么能从页面上拿出来？Top
15 楼iwlk（http://www.ChinaFedora.cn/ fedora论坛）回复于 2006-04-25 01:41:02 得分 0
??Top
16 楼huxinsheng168（望M止渴）回复于 2006-04-25 08:31:25 得分 20
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>业务变量</title>
<link rel="stylesheet" href="../css/text1.css" type="text/css">
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function closeCurr()
{
window.close();
}
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.innerHTML+="<input type='text' name='text1'>";
var td2 = document.createElement("TD")
td2.innerHTML+="<input type='text' name='text2'>";
var td3 = document.createElement("TD")
td3.innerHTML+="<input type='text' name='text3'>";
var td4 = document.createElement("TD")
td4.innerHTML+="<input type='text' name='text4'>";
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tbody.appendChild(row);
}
//-->
</SCRIPT>
<body bgcolor="#EBEEF7">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tbody>
<tr>
<td height="30"><b>信息列表</b></td>
</tr>
<tr align="center" valign="middle">
<td>
<input type="button" border="0" name="add" value="添 加" width="64" height="27" onClick="addRow('myTable');">
<input type="button" border="0" name="ok" value="确 定" width="60" height="27" onclick="javascript:closeCurr();">
<input type="button" border="0" name="cancel" value="取 消" width="60" height="27" onclick="javascript:closeCurr();">
</td>
</tr>
<tr align="center" valign="middle">
<td>
<table width="100%" border="0" id="myTable" cellspacing="0" cellpadding="4" class="table_1">
<tbody>
<tr align="left" bgcolor="#ff9666">
<td class="td_1" width="25%">名称</td>
<td class="td_1" width="25%">年龄</td>
<td class="td_1" width="25%">地址</td>
<td class="td_1" width="25%">邮政编码</td>
</tr>
<tr align="left">
<td width="25%">
<input name="text1" type="text" value="张三">
</td>
<td width="25%">
<input name="text2" type="text" value="23">
</td>
<td width="25%">
<input name="text3" type="text" value="湖南省">
</td>
<td width="25%">
<input name="text4" type="text" value="422252">
</td>
</tr>
<tbody>
</table>
</td>
</tr>
</table>
</body>
</html>Top
17 楼time_blink（time_blink）回复于 2006-04-25 08:38:10 得分 0
学习Top
18 楼rlqiang（（不留）戒烟买房中。。。）回复于 2006-04-25 09:02:04 得分 0
学习Top
19 楼power_zl（晨光）回复于 2006-04-25 09:27:17 得分 0
http://community.csdn.net/Expert/TopicView3.asp?id=4710986
请大家帮忙看看Top
20 楼Changjian_f（）回复于 2006-04-25 10:00:40 得分 10
/**动态生成编号顺序*/
var i = 1;
/*
*动态生成编号输入框
*/
function AddNewRow()
{
if (i<=10){
var rowcount=Mytable.rows.length ;
var newrow=Mytable.insertRow(-1);
newrow.insertCell(0).innerHTML= "编号"+ i +"";
newrow.insertCell(1).innerHTML= "<INPUT type=text name='addsubno' style=\"WIDTH: 200px; HEIGHT: 22px\" size=8 value=\"" + "\">";
i++;
}
这个是控制动态生成表格的代码 我这里只能生成一个输入框,如何生成一列楼主再实验一下,点按扭触发上面的脚本动态生成一列,然后在formbean定义一个数组来接受 'addsubno' struts可以自动识别'addsubno' 的维数（这点不很清楚）但是确实可以实现，楼主就可以得到'addsubno' 了剩下的问题就是插入数据库了，这种方法我试过，成功了，楼主可以一试 。Top
21 楼buyaowen（失业中，请勿打扰）回复于 2006-04-25 10:56:38 得分 0
js，半年前的一个项目写过
需要注意的是显示出来后能通过form传值Top
22 楼zhuangyan2004（庄严）回复于 2006-04-25 11:28:49 得分 0
以前我也写过,现在复习一下啦Top
23 楼benq998（问题没解决,坚决不结贴.解决了还不结贴,极度鄙视.）回复于 2006-04-25 17:05:52 得分 0
http://blog.csdn.net/benq998/archive/2006/04/16/665937.aspxTop
24 楼lcllcl987（毛爷爷）回复于 2006-04-25 21:55:13 得分 20
怎么样动态的在页面上增加或删除一个文本输入框?
通常有两种方法:
1.利用后台服务:比如
在session中设置一个变量num，每点一次"增加"按钮num的值+1，然后页面刷新一下(返回该页面)。
显示的时候从session中取到num的值，然后使用循环生成input框
<% for(int i;i<num;i++)){ %>
<input type="text" name="aaa"/>
<% } %>
删除的情况和此相似,就是点击"删除"按钮后,num的值-1,然后刷新页面.
这种方法的确可以实现动态的增加或删除一个文本输入框,只是你先前在页面上填写的东西都没有了.并且需要后台服务器的处理,速度也有一定影响.这不是很好的方法
2.利用页面脚本,如javascript实现.
javascript由于是运行在客户端,速度自然不成问题,并且你先前在页面上填写的东西并不会因为你的增加或删除文本输而丢失,使用非常方便,下面给出例子:
<HTML>
<Head>
<Script Language=JavaScript>
function insertRow(isTable){
index = isTable.rows.length;
nextRow = isTable.insertRow(index);
isText = nextRow.insertCell(0);
txtArea = nextRow.insertCell(1);
index++;
index = index.toString();
nameStr = "item"+index;
txtStr = "Item "+index;
isText.innerHTML = txtStr;
txtArea.innerHTML = "<input type=text name="+nameStr+" size=5>";
}
</Script>
</Head>
<Body>
<Form name='Form1'>
<Table id='dynTable' cellpadding=5 cellspacing=5 border=1>
<TR><TD> Item 1</TD><TD><input type="text" name="item1" size="5"></TD></TR>
<TR><TD> Item 2</TD><TD><input type="text" name="item2" size="5"></TD></TR>
<TR><TD> Item 3</TD><TD><input type="text" name="item3" size="5"></TD></TR>
</Table>
</Form>
<input type=button value="Insert row" onclick="insertRow(dynTable)" >
</Body>
</HTML>
下面在给个功能更全的例子:
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addTextBox(form, afterElement) {
// Increment the textbox number
textNumber++;
// Create the label
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("id","txt"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
// Put the textbox inside
label.appendChild(textField);
// Add it all to the form
form.insertBefore(label,afterElement);
return false;
}
function removeTextBox(form) {
if (textNumber > 1) { // If there's more than one text box
// Remove the last one added
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
上面的两个例子基本上可以满足增加或删除一个文本输入筐的要求
Top
25 楼lcllcl987（毛爷爷）回复于 2006-04-25 21:55:34 得分 0
http://blog.csdn.net/lcllcl987/archive/2005/04/15/348498.aspxTop
26 楼nisus_lee（Java初学者..）回复于 2006-04-25 22:26:07 得分 0
学习ingTop
27 楼qingyuan18（zealot_tang）回复于 2006-04-25 22:48:53 得分 20
动态生成行的操作还是用js来做吧，提交到后台再回来效率太低了，提供一个“保存”按钮把所有表记录一次更新到后台就可以了
动态生成表格行的操作示例：
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=JScript>
<!--
function document_oncontextmenu() {
window.event.returnValue = false;
return false;
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE=JScript FOR=document EVENT=oncontextmenu>
<!--
document_oncontextmenu()
//-->
</SCRIPT>
</HEAD>
<LINK href="style.css" rel=stylesheet type=text/css>
<SCRIPT LANGUAGE=JScript>
<!--
var NowW = 3;
var NowH = 3;
function MakeSerial(w,h)
{
return "" + w + "_" + h;
}
function MakeInputTable(MaxW,MaxH)
{
var Html = "<Table cellSpacing=1 cellPadding=1 border=0>";
for(var h =0;h<MaxH;h++)
{
Html += "<TR>";
for(var w = 0;w<MaxW;w++)
{
Html += "<TD>";
Html += "<INPUT type=\"text\" id=INPUT"+MakeSerial(w,h)+" name=INPUT"+MakeSerial(w,h)+" Size = 8 maxLength=32>";
Html += "</TD>";
}
Html += "</TR>";
}
Html += "</Table>";
return Html;
}
function MakeTable(MaxW,MaxH)
{
var Html = "<Table cellSpacing=0 cellPadding=1 border=1 borderColorDark=#FFFFFF borderColorLight=#000000 width=100% style=\"FONT-SIZE: medium; CURSOR: default; COLOR: aliceblue; BACKGROUND-COLOR: #556677\">";
for(var h =0;h<MaxH;h++)
{
Html += "<TR>";
for(var w = 0;w<MaxW;w++)
{
Html += "<TD>";
var Value = window.document.body.all("INPUT" + MakeSerial(w,h)).value;
if (Value=="")
Value = " ";
Html += Value;
Html += "</TD>";
}
Html += "</TR>";
}
Html += "</Table>";
return Html;
}
function AddW(Size)
{
NowW += Size;
if (NowW>12)
NowW = 12;
if (NowW<1)
NowW = 1;
INPUT.innerHTML = MakeInputTable(NowW,NowH);
}
function AddH(Size)
{
NowH += Size;
if (NowH>12)
NowH = 12;
if (NowH<1)
NowH = 1;
INPUT.innerHTML = MakeInputTable(NowW,NowH);
}
function Ok()
{
BASE.innerHTML = MakeTable(NowW,NowH);
}
//-->
</SCRIPT>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="100%" border=0 Height="100%">
<TR Height="1%">
<TD></TD>
<TD align=middle><FONT face=黑体
size=5><STRONG>动态表格生成器</STRONG></FONT></TD>
<TD></TD>
</TR></TR>
<TR Height="50%">
<TD></TD>
<TD align=middle><DIV ID=BASE> </DIV></TD>
<TD></TD></TR>
<TR Height="49%">
<TD></TD>
<TD align=middle><DIV ID=INPUT></DIV></TD>
<TD></TD></TR>
<TR Height="1%">
<TD></TD>
<TD align=middle><INPUT type="button" value="增加行" OnClick="AddH(1)"><INPUT type="button" value="减少行" OnClick="AddH(-1)"> <INPUT type="button" value=" 提交 " OnClick="Ok()"> <INPUT type="button" value="增加列" OnClick="AddW(1)"><INPUT type="button" value="减少列" OnClick="AddW(-1)"></TD>
<TD></TD>
</TR></TR>
</TABLE>
</BODY>
<SCRIPT LANGUAGE=JScript>
<!--
INPUT.innerHTML = MakeInputTable(NowW,NowH);
//-->
</SCRIPT>
</HTML>Top
相关问题
关键词
得分解答快速导航
相关链接
广告也精彩
反馈
