2012-01-13 56 views
1

我没有Java脚本的工作知识,我正试图进入它。在脚本中没有多个相同代码的情况下重复javascript funcitonality

我有一个带有表格的PHP页面。该行的第一列有一个下拉列表。当onclick事件触发时,它会根据php mysql查询填充行中的其他单元格。

问题是我的表最多可以包含75行,因为它是订购页面。我不希望使用不同的指针具有相同的javascropt代码75次?

有没有更简单的方法来做到这一点,以优化页面和减少页面的复杂性? (document.getElementById(“txtHint1”)。innerHTML =“”;)

我可以使用$(this)吗?如果是的话,我如何整合它?否则我的选择是什么?

我的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> 

PHP页面被调用执行mysql的是advane的帮助

<?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); 
?> 

感谢, 瑞安

+0

为什么不从jQuery简化JavaScript开始? – j08691 2012-01-13 21:04:44

回答

2

你已经触及了最有价值的编程原理之一:不要重复自己(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元素将是构建代码的更好方法,但这有点超出了问题的范围。

+0

谢谢阿米特,感谢你为这个答案付出的努力。工作100%。 关心, – Smudger 2012-01-16 12:04:17

2

你可以通过一个额外的参数使其作为通用函数来电者,

修改功能,请注意功能名称更改为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> 

编辑:更改的参数从指数为num的名字,指数是误导,因为textHint从1开始。

2

这里的简单的方法:

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> 
2

写一个关于更改处理常见,而在变化处理得选择元素 然后element.parentNode.nextSibling.firstChild会给你的div标签,然后用其ID为js元素引用,并做出正确的PHP调用。这样所有的html事件下标都是一样的。

你也可以写一个带有tr元素(代表用户)的php循环作为正文,然后使用上面的方法来连接javascript。这样,你的html代码和js代码都会减少,你甚至不必明确地命名它们。

1

以为我会在这里发布最终的解决方案和完整的代码。非常感谢@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); 
?> 
再次给大家在这个网站

谢谢,非常感谢。

相关问题