使用javascript从数据库中检索多个行并显示在html表中

Question

我正在尝试使用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页面的基本代码

Answer 1

@ user3825041：在HTML元素id中，a本质上是唯一的。 我的意思是，如果我们反复设置具有不同值的相同ID，最后将更新单个值（即最后一个值）。 由于这个原因，您只能获得最后的价值。 请尝试在每次更新行时更改ID。

否则，您可以使用html表插件（例如bootstrap table），这些插件易于使用且响应迅速。 您只需要向这些插件提供数据（JSON / XML格式）即可。

http://getbootstrap.com/css/#tables

Answer 2

您可以从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>