我对Java脚本没有任何工作知识,正在努力学习。
我有一个带有表格的PHP页面。行的第一列有一个下拉列表。当onclick事件被触发时,它会基于php-mysql查询填充行中的其他单元格。
问题是,我的表最多可以由75行组成,就像订单页面一样。我不想用不同的指针75次使用相同的javascropt代码?
有没有一种更简单的方法可以优化页面并降低页面复杂性?(document.getElementById("txtHint1").innerHTML=";)
我能用美元吗?如果是,我该如何整合它?否则我有什么选择?
我的php页面如下。目前它可以使用两行,但是我需要提供75行。
<html>
<head>
<script type="text/javascript">
function showUser1(str)
{
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>
<script type="text/javascript">
function showUser2(str)
{
if (str=="")
{
document.getElementById("txtHint2").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("txtHint2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?
$con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("unilekxy_unilever", $con);
$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata";
$resultsku=mysql_query($skusql);
$optionssku="";
while ($row=mysql_fetch_array($resultsku)) {
$sku=$row["packcode"];
$description=$row["description"];
$optionssku.="<OPTION VALUE='"$sku'">".$description;
}
?>
<table border=1>
<tr>
<td width=393>Product</td>
<td width=200>Category</td>
<td width=150>Selling Unit</td>
<td width=150>Grouping</td>
<td width=150>Full Case QTY</td>
</tr>
</table>
<table>
<tr>
<td>
<select name="users" onchange="showUser1(this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint1"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser2(this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint2"><b>SKU Details will be seen here</b></div>
</td>
</tr>
</table>
</body>
</html>
被调用来执行mysql的php页面是
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'dbuser', 'dbpass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("unilekxy_unilever", $con);
$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<table border=1><tr>";
echo "<td width=200>".$row['Category']."</td>";
echo "<td width=150>".$row['SellingUnits']."</td>";
echo "<td width=150>".$row['Grouping']."</td><td width=150>";
if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
echo "</td></tr></table>";
}
mysql_close($con);
?>
提前感谢您的帮助,Ryan
您已经了解了编程最有价值的原则之一:不要重复自己(DRY)。编程就是寻求最有效的方法来做某事。无论如何,这里有一种最简单的方法可以将javascript函数重写为更通用的:
<script type="text/javascript">
function showUser(userNumber, str)
{
if (str=="")
{
document.getElementById("txtHint" + userNumber).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("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
现在,在您的每个表行中,您的选择元素变为:
<select name="users" onchange="showUser(1, this.value)" size=1>
将"1"替换为行号。
使用jQuery获取最接近的txtHint元素是构建代码的更好方法,但这有点超出了问题的范围。
这里有一个简单的方法:
showUser1(str)
成为
showUser1(str, number)
和
document.getElementById("txtHint1").innerHTML="";
成为
document.getElementById("txtHint"+number).innerHTML="";
在html:中
<select name="users" onchange="showUser2(this.value)" size=1>
成为
<select name="users" onchange="showUser(this.value,2)" size=1>
您可以通过从调用方传递额外的参数来将其作为泛型函数
已修改函数,请注意,函数名称已更改为showUser
,并添加了额外的参数num
,以确定从哪一行调用它。
function showUser(str, num)
{
if (str=="")
{
document.getElementById("txtHint" + num).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("txtHint" + num).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
修改后的HTML,请注意函数名称的更改和下一行的附加参数1(将为2),依此类推
<select name="users" onchange="showUser(this.value, 1)" size=1>
编辑:将参数名称从index更改为num,索引具有误导性,因为textHint从1开始。
编写一个通用的变更处理程序,并在变更处理程序中获取select元素然后element.parentNode.nextSibling.firstChild
会给出div标记,然后使用它的id来引用js元素并进行正确的php调用。这样,所有的html事件下标都是相同的。
您还可以编写一个以tr元素(表示用户)为主体的php循环,然后使用上述方法连接javascript。这样一来,你的html代码和js代码都会减少,你甚至不必显式地命名它们。
我想在这里发布最终解决方案和完整的代码。非常感谢@Amit,我用了他的答案。也感谢所有花时间回答我问题的人,所有这些都非常宝贵。
index.php
<html>
<head>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber+1)).style.display="block";
if (str=="")
{
document.getElementById("txtHint" + userNumber).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("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?
$con = mysql_connect('localhost', DBUser', 'DBPass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("DBName", $con);
$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata";
$resultsku=mysql_query($skusql);
$optionssku="";
while ($row=mysql_fetch_array($resultsku)) {
$sku=$row["packcode"];
$description=$row["description"];
$optionssku.="<OPTION VALUE='"$sku'">".$description;
}
?>
<table border=1>
<tr>
<td width=393>Product</td>
<td width=200>Category</td>
<td width=150>Selling Unit</td>
<td width=150>Grouping</td>
<td width=150>Full Case QTY</td>
</tr>
</table>
<table>
<tr id="r1">
<td>
<select name="users" onchange="showUser(1, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint1"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r2" style="display:none;">
<td>
<select name="users" onchange="showUser(2, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint2"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r3" style="display:none;">
<td>
<select name="users" onchange="showUser(3, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint3"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r4" style="display:none;">
<td>
<select name="users" onchange="showUser(4, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint4"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r5" style="display:none;">
<td>
<select name="users" onchange="showUser(5, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint5"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r6" style="display:none;">
<td>
<select name="users" onchange="showUser(6, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint6"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r7" style="display:none;">
<td>
<select name="users" onchange="showUser(7, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint7"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r8" style="display:none;">
<td>
<select name="users" onchange="showUser(8, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint8"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r9" style="display:none;">
<td>
<select name="users" onchange="showUser(9, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint9"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r10" style="display:none;">
<td>
<select name="users" onchange="showUser(10, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint10"><b>SKU Details will be seen here</b></div>
</td>
</tr>
</table>
</body>
</html>
GetData1.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'DBUser', 'DBPass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("DBName", $con);
$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<table border=1><tr>";
echo "<td width=200>".$row['Category']."</td>";
echo "<td width=150>".$row['SellingUnits']."</td>";
echo "<td width=150>".$row['Grouping']."</td><td width=150>";
if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
echo "</td></tr></table>";
}
mysql_close($con);
?>
再次感谢这个网站上的每一个人,真的很感激。