我有一个基于PHP的Web应用程序，在用户输入值时，它会从mysql数据库中提取详细信息并显示它，而无需刷新页面。显然，这是使用javascript完成的。
这可以在黑莓和平板电脑等移动设备上的Internet Explorer，Chrome等上100％正确地工作，一旦用户输入数据，格式就会困惑。请参阅下面的屏幕截图。
Internet Explorer，表结构保持不变:
移动设备(Galaxy Tablet)，表结构已更改:
example can be viewed here
涉及的2页代码如下所示。前端是一个php页面，该页面使用javascript从mysql获取和显示数据。
php页面:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber)).style.display="block";
if (str=="")
{
document.getElementById("txtHint1").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="orderform" id="orderform" action="newsale.php" method="post">
<div align="left" id="txtHint1">mysql data will be shown here</div>
<br>
<table border="1">
<tr id="r1">
<td>
<input size="8" type="text" id="sku1" name="sku1" onchange="showUser(1, this.value)" >
</td>
<td>
<input type="text" id="qty1" name="qty1" size="3">
</td>
</tr>
<tr id="r2">
<td>
<input size="8" type="text" id="sku2" name="sku2" onchange="showUser(1, this.value)" >
</td>
<td>
<input type="text" id="qty2" name="qty2" size="3" >
</td>
</tr>
</table>
</form>
</body>
</html>
getdata1.php页面获取mysql数据:
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'user', 'pass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("database", $con);
$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<font color=blue size=2>Description:</font> <font color=red size=2>".$row['Description']."</font>, ";
}
mysql_close($con);
?>
再次感谢您的协助，不胜感激。
或者，有人可以使用其他JavaScript来给我显示来自mysql的数据吗？抱歉，但我的JavaScript技能不存在。
感谢致敬，
最佳答案
问题出在JavaScript的第一行:
document.getElementById("r"+(userNumber)).style.display="block";
您将第一行的显示样式设置为
block。我认为没有理由在您的情况下执行此操作，因此，只需删除该行，您的HTML就可以在所有浏览器(包括Samsung Galaxy Tab，我在实际的平板电脑上测试过)上都能正常工作。顺便提一下，FireFox中也发生了单元移动效果(并且不再出现)。