当前页面: 开发资料首页 → Javascript 专题 → Javascript 动态多行输入问题
Javascript 动态多行输入问题
摘要: Javascript 动态多行输入问题
Javascript 动态多行输入问题:
//input.jsp
<%@ page contentType="text/html;charset=Big5"%>
<%request.setCharacterEncoding("big5");%>
<script language="javascript">
function tbladdrow()
{
var i=lines.rows.length;
var row = Table1.insertRow(Table1.rows.length);
var col = row.insertCell(0);
col.innerHTML = "<input id=line["+i+"][name1] name=line["+i+"]name1 SIZE=10>";
col = row.insertCell(1);
col.innerHTML = "<input id=line["+i+"][name2] name=line["+i+"]name2 SIZE=10>";
col = row.insertCell(2);
col.innerHTML = "<input id=line["+i+"][name3] name=line["+i+"]name3 SIZE=10>";
col = row.insertCell(3);
col.innerHTML = "<input id=line["+i+"][name4] name=line["+i+"]name4 SIZE=10>";
}
function tbladdrows(items)
{
for( i = 1 ; i <= items ; i++)
{
tbladdrow();
}
}
function delrow()
{
if(lines.rows.length==0)
{
return false ;
}
lines.deleteRow();
}
</script>
<head>
</head>
<body>
<form action="getInput.jsp">
<td width=412 bgColor=#e4e4e4>
<table id=Table1 cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=350 align=center borderColorLight=#000000 border=1>
<tr bgColor=#999999>
<th width=94>參數一</th>
<th width=84>參數二</th>
<th width=85>參數三</th>
<th width=77>參數四</th></tr>
<tr>
<td><input id="things_name" TYPE="text" NAME="things_name" SIZE="15"></td>
<td><input id="things_model" TYPE="text" NAME="things_model" SIZE="10"></td>
<td><input id="things_number" TYPE="text" NAME="things_number" SIZE="5"></td>
<td><input id="things_unit" type="text" name="things_unit" size="5"></td>
</tr>
</table>
<input id=items type=hidden value=1 name=items> <input onclick=tbladdrow(items.value); type=button value=新增一行 name=insert/>
<input language=javascript onclick="return delrow()" type=button value=刪除一行 name=del/>
<input type="submit" value="commit"/>
</form>
</body>
//getInput.jsp
<%@ page contentType="text/html;charset=Big5"%>
<%@ page import="java.util.*"%>
<%
request.setCharacterEncoding("big5");
//for(){
/*int items =Integer.parseInt(request.getParameter("items"));
out.println(items);
for(int i=1; i<=items; i++){*/
//get the user's input text name
Enumeration paramNames=request.getParameterNames();
String paramName=null;
while(paramNames.hasMoreElements()){
paramName=(String)paramNames.nextElement();
String paramValues=request.getParameter(paramName);
out.println("param'name "+paramName+" ");
out.println("paramValues"+paramValues+"
");
//out.println("***
");
/*String param=request.getParameter(paramName);
out.println(paramName+" "+param+"
");*/
/*String paramValues[]=request.getParameterValues(paramName);
for(int i=0; i<=paramValues.length-1; i++)
{
out.println("param'name "+paramName+" ");
out.println("pramValues["+i+"]"+paramValues[i]+"
");}
*/
}
//out.println("
"+name);
%>
<head>
</head>
<body>
</body>
运行效果:
param'name line[0]name2 paramValues12
param'name line[0]name3 paramValues13
param'name items paramValues1
param'name line[0]name1 paramValues11
param'name line[1]name4 paramValues24
param'name line[1]name1 paramValues21
param'name line[0]name4 paramValues14
param'name line[1]name3 paramValues23
param'name line[1]name2 paramValues22
可以看到,我们可以得到正确的值,但是,有一个问题,值是乱的,没有规律地出现,我们要把值插入数据库的时候,需要整理后再插入(废话).怎么办?
如果我们知道到底输入了几行,这个问题几乎可以迎刃而解了,可是,我们如何知道,前面的一个页面是靠javascript 进行动态输入的,我在迷茫中终于发现了解决的方法:
param'name items paramValues1
这个1不是我们想要得到的,但是它就是代表了多少栏!
这样就好办了!
经过修改几次代码,我终于实现了自己的想法
<%@ page contentType="text/html;charset=Big5"%>
<%@ page import="java.util.*"%>
<%
request.setCharacterEncoding("big5");
//receive parammeter's name as the type of Enumeration
/*Enumeration paramNames=request.getParameterNames();
String paramName=null;
paramName=(String)paramNames.nextElement();
String paramValues=request.getParameter(paramName);*/
int column=0;
String tempCol=request.getParameter("items").trim();
column=Integer.parseInt(tempCol);// notice exception!
//while(paramNames.hasMoreElements()){
for(int i=0 ;i<=column; i++)
{
for(int j=1 ;j<=4; j++)
{
String getInputTemp="line["+i+"]name"+j;
//out.println(getInputTemp);
out.println("line["+i+"]"+"name["+j+"]"+request.getParameter(getInputTemp));
}
out.println("
");
}
%>
<head>
</head>
<body>
</body>
这里我们根本没有用到Enumeration, paramName=(String)paramNames.nextElement(); 为什么,因为我已经知道了输入的参数的名字!其实想一想很简单的,呵呵
总结一下,动态输入的javascript 代码是google搜索来的,而它那个代码是php,而我这里要用JSP接受代码的输入.关于javascript 的代码基本能看懂,但是让我写却写不出来,但是,好像目前已经够用了.原先博客写过一篇文章,关于此问题,这次再次研究(被逼的,没有办法),终于解决了.
其实想到数据结构上,这里就是一个不固定rows却固定columns 的二维数组而已,如果想到此,解决问题会很快,说到这里,想到数据结构自己掌握还不行,而且好像没有用到过,如果作为一个程序员却不能熟练掌握data stutcture , 只有忏悔和低下头来猛学!
本来以为可以了,可是,我测试了3columns以上的数据,突然发现错误!那个items一点意义都没有,怎么办?遍历得到参数名总数量-1/4
<%@ page contentType="text/html;charset=Big5"%>
<%@ page import="java.util.*"%>
<%
request.setCharacterEncoding("big5");
//receive parammeter's name as the type of Enumeration
/*Enumeration paramNames=request.getParameterNames();
String paramName=null;
paramName=(String)paramNames.nextElement();
String paramValues=request.getParameter(paramName);*/
int columnTemp=0;
String paramName=null;
Enumeration paramNames=request.getParameterNames();
while(paramNames.hasMoreElements()){
paramName=(String)paramNames.nextElement();
columnTemp++;
}
int column=0;
column=(columnTemp-1)/4;
out.println(column+"
");
{ for(int j=1 ;j<=4; j++) { String getInputTemp="line["+i+"]name"+j; //out.println(getInputTemp); out.println("line["+i+"]"+"name["+j+"]"+request.getParameter(getInputTemp)); } out.println(" } %> <head>
for(int i=0 ;i
");
</head>
<body>
</body>
这里终于可以了,可是
String paramName=null;
Enumeration paramNames=request.getParameterNames();
while(paramNames.hasMoreElements()){
paramName=(String)paramNames.nextElement();// necessary
columnTemp++;
}
必需paramName=(String)paramNames.nextElement();// necessary
否则不能遍历,或死掉一样,不知道为什么?
像ResutltSet rs.next() 都可以遍历(分页的时候),高人请指点一下,moonsoft_su@126.com!
</td> </tr> </table>↑返回目录
前一篇: javascript里的类思想
后一篇: 实用Javascript 传值, 数据验证, 事件触发总结