当我们从下拉列表中选择一个元素时，它会显示该元素的值，但之后当我们从该下拉列表中选择下一个元素时，它必须显示前一个元素下方的值。
我一直这样做直到显示该元素，但是当单击下一个元素时，第一个元素不显示。
请帮我解决这个问题。我使用 HTML、AJAX 和 PHP 创建了我的代码。
<?php
$q = intval($_GET['q']);
$con = mysql_connect("localhost", "root", "", "registration");
if (!$con)
{
echo "Connection Failed..";
echo mysql_error($con);
}
$sql = "select * from dynamic where Id='".$q."'";
$result = mysql_query($con, $sql);
echo "<table border=3 bordercolor='pink' width=100 height=100>
<tr>
<th>Id</th>
<th>Name</th>
<th>Fathername</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
</tr>";
while ($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".$row["Id"]."</td>";
echo "<td>".$row["Name"]."</td>";
echo "<td>".$row["Fathername"]."</td>";
echo "<td>".$row["Age"]."</td>";
echo "<td>".$row["Gender"]."</td>";
echo "<td>".$row["Address"]."</td>";
echo "</td>";
}
echo "</tables>";
mysql_close($con);
?>
<html>
<head>
<script>
function test(str) {
if (str == "") {
document.getElementById("tst").innerHTML="";
}
else {
if(window.XMLHttpRequest) {
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHttp");
}
xml.onreadystatechange = function() {
if (xml.readyState == 4 && xml.status == 200) {
document.getElementById("tst").innerHTML = xml.responseText;
}
}
xml.open("GET", "mysqlajax.php?q=" + str, true);
xml.send();
}
}
</script>
<body>
<form>
<select name="User" onchange="test(this.value)">
<option value="">-Select user-</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">S</option>
<option value="5">G</option>
<option value="6">S</option>
</select>
</form><br>
<b><div id="tst"></b></div>
</body>
</html>
最佳答案
不要覆盖 innerHTML，而是尝试附加到它。
尝试这样的事情:
HTML:
<html>
<head>
<script>
function test(str)
{
if(str=="")
{
document.getElementById("tst").innerHTML="";
}
else
{
if(window.XMLHttpRequest)
{
xml=new XMLHttpRequest();
}
else
{
xml=new ActiveXObject("Microsoft.XMLHttp");
}
xml.onreadystatechange=function()
{
if(xml.readyState == 4 && xml.status== 200)
{
var innerHTML = document.getElementById("tst").innerHTML;
innerHTML += xml.responseText;
document.getElementById("tst").innerHTML=innerHTML;
}
}
xml.open("GET","mysqlajax.php?q="+str,true);
xml.send();
}
}
</script>
<body>
<form>
<select name="User" onchange="test(this.value)">
<option value="">-Select user-</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">S</option>
<option value="5">G</option>
<option value="6">S</option>
</select>
</form><br>
<b>
<div id="tst"></div>
</body>
</html>
PHP:
<?php
$q=intval($_GET['q']);
//$con=mysql_connect("localhost","root","","registration");
//if(!$con)
//{
//echo "Connection Failed..";
//echo mysql_error($con);
//}
//$sql="select * from dynamic where Id='".$q."'";
//$result=mysql_query($con,$sql);
echo "<table border=3 bordercolor='pink' width=100 height=100>
<tr>
<th>Id</th>
<th>Name</th>
<th>Fathername</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
</tr>";
//while($row=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "</td>";
echo "</tr>";
}
echo "</table>";
//mysql_close($con);
?>
响应将是:
关于php - 使用ajax动态添加元素到表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30910278/