Question

我没有Java脚本的工作知识，我正试图进入它。

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

问题是我的表最多可以包含75行，而不是订单页面。我宁愿不使用不同的指针75次使用相同的javascropt代码？

是否有更简单的方法来优化页面并降低页面复杂性？（的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>

调用执行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);
 ?>

谢谢你的帮助，莱恩

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

编辑：将参数名称从索引更改为num，索引具有误导性，因为textHint从1开始。

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

Answer 3

在更改处理程序上编写一个公共文件，并在更改处理程序中获取select元素然后element.parentNode.nextSibling.firstChild将给出你的div标签，然后将其id用于js元素引用并进行正确的php调用。这样你所有的html事件下标都是一样的。

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

Answer 4

你已经触及了最有价值的编程原则之一：不要重复自己（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元素变为：

<select name="users" onchange="showUser(1, this.value)" size=1>

用行号替换'1'。

使用jQuery来获取最接近的txtHint元素将是构建代码的更好方法，但这有点超出了问题的范围。

Answer 5

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

再次感谢本网站上的所有人，非常感谢。

重复javascript功能，脚本中没有相同代码的多个实例

5 个答案: