2012-01-13 59 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); 
?> 
再次給大家在這個網站

謝謝,非常感謝。

相關問題