我正在尝试使用javascript在html表中显示数据库值,但我只获取数据库表中的最后一个值
function productValues() {
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
var responseJson= JSON.parse(xmlHttp.responseText);
var length=responseJson.a1.length;
document.getElementById("nid").value="";
document.getElementById("pid").value="";
document.getElementById("cid").value="";
document.getElementById("name").value="";
document.getElementById("price").value="";
for(i=0;i<length;i++){
var a=responseJson.a1[i];
var b=responseJson.a2[i];
var c=responseJson.a3[i];
var d=responseJson.a4[i];
var e=responseJson.a5[i];
document.getElementById("nid").value=a;
document.getElementById("pid").value=b;
document.getElementById("cid").value=c;
document.getElementById("name").value=d;
document.getElementById("price").value=e;
}
}
}
//响应
ProductSearch prod=new ProductSearch();
prod.setA1(a1);
prod.setA2(a2);
prod.setA3(a3);
prod.setA4(a4);
prod.setA5(a5);
String responseJson = new Gson().toJson(prod);
// html代码
</head>
<form id="form1" method="post" action="ProductNameSearchF">
<table align="center">
<tr>
<td><font color="#006400"><b> Select Item:</b></font>
<input type="text" name="searchname" id="user" onclick="clearFields()"/>
<input type="button" id="submit" style=" color:#280000 ;font-size: medium;" value="Edit" onclick="getDetails();" />
<tr>
<br/></td></tr>
<div id="welcometext" align="center">
</div>
</table>
<TABLE cellpadding="8" id ="table" border="1" align="center" style="background-color: #EEEEEE;">
<TR bgcolor="#66CCFF"><font color="#fff">
<TD color="#0080FF" width="0.1%" ><B>Id</B></TD>
<TD color="#0080FF" width="0.5%"><B>ProductType_Id</B></TD>
<TD width="0.1%"><B>Cuisine_Id</B></TD></font>
<TD width="0.5%"><B>Name</B></TD></font>
<TD width="0.5%"><B>Price</B></TD></font>
</TR>
<TR>
<TD><input type="text" name="id" id="nid" style="background-color:transparent; color:blue; " readonly ></TD>
<TD><input type="text" name="productid" id="pid" style="background-color:transparent; color:red; " ></TD>
<TD><b><input type="text" name="cuisineid" id="cid" style="background-color:transparent; color:red; " ></b></TD>
<TD><b><input type="text" name="name" id="name" style="background-color:transparent; color:red; "></b></TD>
<TD><b><input type="text" name="price" id="price" style="background-color:transparent; color:red;" ></b></TD></input>
</TR>
</font>
<font size="+3" color="red"></b>
</font>
<TR>
</tr>
</TABLE>
<table align="center">
<tr>
<td colspan=""> <a href="SearchFirstNameClear.jsp" style="text-color: #ffffcc;"><img src="clear.jpg" width="50" height="30" ></img></a> <button type="submit" name="someName" value="someValue"><img src="redsubmit.png" width="70" height="30" ></button> </td>
</tr>
</table>
</table>
</form>
这是我的html代码,我只添加了html页面的基本代码
答案 0 :(得分:2)
@ user3825041:在Html元素中,id a本质上是唯一的。我的意思是如果我们重复设置具有不同值的相同ID,最后您将更新单个值(即最后一个)。因此,您只获得最后一个价值。 请尝试更改每行更新的ID。
否则你可以使用像bootstrap表这样的html表插件,它们易于使用并且响应迅速。您只需要为这些插件提供数据(JSON / XML格式)。
答案 1 :(得分:0)
您可以从javascript动态生成表,为实现它(servlet)响应应该像:
ArrayList<ProductSearch> al = new ArrayList<ProductSearch>();
... databse code ...
while(rs.next()) {
ProductSearch prod=new ProductSearch();
prod.setA1(a1);
prod.setA2(a2);
prod.setA3(a3);
prod.setA4(a4);
prod.setA5(a5);
al.add(prod);
}
...
String responseJson = new Gson().toJson(al);
response.getWriter().println(responseJson);
你的HTML应该是这样的:
<input type="button" value="Show Results" onclick="showTable()" />
<div id="dvTable"></div>
<script type="text/javascript">
function showTable() {
if (xmlHttp.readyState == 4) {
var responseJson = JSON.parse(xmlHttp.responseText);
var table = document.createElement("TABLE");
table.border = "1";
var row = table.insertRow(-1);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "nid";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "pid";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "cid";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "name";
row.appendChild(headerCell);
var headerCell = document.createElement("TH");
headerCell.innerHTML = "price";
row.appendChild(headerCell);
for (var i = 0; i < responseJson.length; i++) {
row = table.insertRow(-1); //creates new row
row.id = "row1"; // if you want to set id of row
var cell = row.insertCell(-1); // creates new column
cell.innerHTML = responseJson[i].a1; // put data in column
cell.id = "column1"; // if you want to set id of column
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a2;
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a3;
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a4;
var cell = row.insertCell(-1);
cell.innerHTML = responseJson[i].a5;
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
}
</script>