ここでは、3 つのテキスト フィールドを連続して使用する動的な Web プロジェクトを作成します。最初のテキストフィールドにテストコードを入力してタブキーを押すと、テスト名とレートの両方の値が、ajax応答を使用してデータベースから他の2つのテキストフィールドに入力されます。そして、3番目のテキストフィールドをクリックすると、3つのテキストフィールドも存在する新しい動的行が生成されますが、動的に生成された行の最初のフィールドに値テストコードを入力してタブキーを押すと、テスト名とレートの両方の値が配置されるという問題があります動的に生成される 2 行目の代わりに、1 行目のテキスト フィールドに。プログラムは最初の行で動作していますが、動的に生成された行では動作していません。
解決策を提供してください:
以下の画像で出力を確認できます。
コードは次のとおりです。
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 (サーブレット)
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;
}
}
出力は
