首頁 > 開發者 > JavaScript

Javascript 動態多行輸入問題

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
javascript|動態|問題

</pre>

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>


<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=Big5">

    <title>輸入</title>

  </head>

  <body>

 <form action="getInput.jsp">

  <DIV align=center><FONT size=2>輸入測試</FONT></DIV></TD>

    <TD width=412 bgColor=#e4e4e4>

      <TABLE id=Table1 cellSpacing=0 borderColorDark=#ffffff cellPadding=0

      width=350 align=center borderColorLight=#000000 border=1>

        <TBODY>

        <TR bgColor=#999999>

          <TH width=94><FONT size=2>參數一</FONT></TH>

          <TH width=84><FONT size=2>參數二</FONT></TH>

          <TH width=85><FONT size=2>參數三</FONT></TH>

          <TH width=77><FONT size=2>參數四</FONT></TH></TR>

        <TBODY id=lines name="lines"><!--

         <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>

                         --></TBODY></TABLE>

      <DIV align=center><BR></DIV>

      <DIV align=center>

      <INPUT id=items type=hidden value=1 name=items> <INPUT onclick=tbladdrow(items.value); type=button value=新增一行 name=insert/>

      <font color="#e4e4e4"> </font>  

      <INPUT language=javascript type=button value=刪除一行 name=del/>

      </DIV></TD></TR></TBODY></TABLE>

<input type="submit" value="commit"/>

</form>

  </body>

</html>


//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("<font color=red>param'name </font>"+paramName+"  ");

 out.println("<font color=red>paramValues</font>"+paramValues+"<br>");

 //out.println("***<br>");

 /*String param=request.getParameter(paramName);

 out.println(paramName+"   "+param+"<br>");*/

  /*String paramValues[]=request.getParameterValues(paramName);

  for(int i=0; i<=paramValues.length-1; i++)

 {

 out.println("<font color=red>param'name </font>"+paramName+"  ");

 out.println("<font color=red>pramValues["+i+"]</font>"+paramValues[i]+"<br>");}

*/

 }

//out.println("<br>"+name);


%>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=Big5">

    <title>接受輸入</title>

  </head>

  <body>

  </body>

</html>


運行效果:

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("<font color=red>line["+i+"]"+"name["+j+"]</font>"+request.getParameter(getInputTemp));

 }

 out.println("<br>");

 }

%>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=Big5">

    <title>接受輸入</title>

  </head>

  <body>

  </body>

</html>


這裡我們根本沒有用到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+"<br>");


 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("<font color=red>line["+i+"]"+"name["+j+"]</font>"+request.getParameter(getInputTemp));

 }

 out.println("<br>");

 }

%>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=Big5">

    <title>接受輸入</title>

  </head>

  <body>

  </body>

</html>


這裡終於可以了,可是

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!

</pre>



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More