檢索多個行

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表格插件，如引導程序表，這些表格很容易使用並且響應快捷。你只需要爲這些插件提供數據（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>