-2

在这里,我创建了一个动态 Web 项目,在该项目中,我连续使用三个文本字段。当我在第一个文本字段中填写 testcode 并按 tab 键时,testname 和 rate 两个值都来自使用 ajax 响应的数据库中的其他两个文本字段。当我单击第三个文本字段时,会生成一个新的动态行,其中还存在三个文本字段,但问题是当我在动态生成行的第一个字段中填充值 testcode 并按 Tab 键时,会放置 testname 和 rate 这两个值在第一行文本字段中,而不是动态生成的第二行。该程序在第一行工作,但它不在动态生成的行中工作。

请提供解决方案:

您可以在下图中看到输出:

代码是:

index.jsp:

<table id="testtable" width="350px" border="">
                        <tr>
                        <td colspan="" align="center" bgcolor="silver" ><font face="Times New Roman" size=3><b>Test ID</b></font></td>
                        <td align="center" bgcolor="silver" ><font face="Times New Roman" size=3><b>Test Name</b></font></td>
                        <td align="center" bgcolor="silver" ><font face="Times New Roman" size=3><b>Rate</b></font></td>    
                        </tr>
                        <tr><td colspan="3">
                        <TABLE id="dataTable" width="350px" border="">
                        <TR>
                          <TD><INPUT type="checkbox" name="chk"/></TD>
                           <td><INPUT type="text" id="tc" name="testcode" style="width:86px;border:1px solid gray" onblur="mango1(this.value)"/></TD>
                           <TD><INPUT type="text" id="testname" name="testname" style="width:165px;border:1px solid gray"/></TD>
                           <TD><INPUT type="text" id="rate" name="rate" style="width:65px;border:1px solid gray" onclick="addRow('dataTable')"  /></TD>

                            </TR>
                          </TABLE></td></tr>
                        </table>

ajax.js

function addRow(tableID) {
 try{
           var table = document.getElementById(tableID);

                                                   // var rowCount = table.rows.length;
                                                   // var row = table.insertRow(rowCount);
          var row = table.insertRow(-1);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;


            }

                  }catch(e){
                      alert(e);
                     }
        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }



        function mango1(testcode)
        {
            alert("this is mango"+testcode);

            var xmlhttp;

            if(window.XMLHttpRequest)
                {

                xmlhttp=new XMLHttpRequest();

                }
            else
                {

                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }


            xmlhttp.onreadystatechange=function()
            {

                if(xmlhttp.readyState==4 && xmlhttp.status==200)
                    {

                    var responseTextVar = xmlhttp.responseText;
                    var item=responseTextVar.split(',');
                    document.getElementById("testname").value=item[0];
                    document.getElementById("rate").value=item[1];


                    }
                    };

                    xmlhttp.open("POST","PatientAction?testcode="+testcode, true);
                    xmlhttp.send();

            }

PatientAction.java (servlet)

package action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Vector;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.PatientDAO;
import dao.TestDAO;
import beans.Patient;
import beans.Address;
//import beans.Candidate;
/**
 * Servlet implementation class PatientAction
 */
@WebServlet("/PatientAction")
public class PatientAction extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public PatientAction() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub





        doPost(request,response);

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        PrintWriter out=response.getWriter();

        response.setContentType("text/html");

        Vector vec=new Vector();
        //1. String testcode=request.getParameter("testcode");

        String testcode[]=request.getParameterValues("testcode");


        TestDAO t1=new TestDAO();
    //2.    Vector vec=t1.getNameAndRate(testcode);
        if(testcode!=null)
         {
            int length=testcode.length; 
             for (int i=0; i<length; i++) {
                 System.out.println("i am here in post3354333"+ testcode[i]+length);
                  vec=t1.getNameAndRate(testcode[i]);
                  out.write((String) vec.get(0)+",");
                    out.write((String) vec.get(1));

                  }

         }
}
}

TestDAO.java

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Vector;

import dao.DBCon;
import beans.Admin;
import beans.Test;

public class TestDAO {

// method to get values from ajax
    public Vector getNameAndRate(String testid)
    {
        Connection con=DBCon.getConnection();
         System.out.println("got connection");

        Vector temp=new Vector();

        try
        {
            ResultSet rset=null;
            PreparedStatement pst = con.prepareStatement("select testname,rate from test where testcode=?");
            System.out.println("got controllll here in getNmaeANDRATE");
            pst.setString(1,testid);

            rset=pst.executeQuery();
                 while(rset.next()){ 
                     temp.add(rset.getString(1));

                     temp.add(rset.getString(2));
                     System.out.println("got control here in loop");
                 }
                }
        catch(Exception e)
        {
            e.printStackTrace();
        }
            return  temp;       
        }
}

输出是

在此处输入图像描述

在此处输入图像描述

4

1 回答 1

0

问题是所有输入字段都使用相同的 id,因此document.getElementById("testname")总是document.getElementById("rate")会返回在 DOM 中找到的第一个输入字段。

您应该为输入字段生成可区分的 id 并将其用于引用。

用伪代码更新

您可以通过将 html 代码更改为

<td><INPUT type="text" id="tc1" name="testcode" style="width:86px;border:1px solid gray" onblur="mango1(this.value, 1)"/></TD>
<TD><INPUT type="text" id="testname1" name="testname" style="width:165px;border:1px solid gray"/></TD>
<TD><INPUT type="text" id="rate1" name="rate" style="width:65px;border:1px solid gray" onclick="addRow('dataTable')"  /></TD>

在您的 JS 代码中,而不是

newcell.innerHTML = table.rows[0].cells[i].innerHTML;

您需要操纵 ID,例如

newcell.innerHTML = increaseTheNumberOfTheIdAndTheRowPassedToMango(table.rows[0].cells[i].innerHTML);

作为一个函数,increaseTheNumberOfTheIdAndTheRowPassedToMango你需要自己编写;例如使用正则表达式或手动创建 HTML 或您命名它
然后你需要调整mango函数以

function mango1(testcode, row) {
...
    document.getElementById("testname" + row).value=item[0];
    document.getElementById("rate" + row).value=item[1];
...
}

这是帮助您入门的众多解决方案之一的图示。

于 2013-05-15T15:03:44.533 回答