javascript - 使用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