Php 在脚本中重复javascript功能，但不包含同一代码的多个实例_Php_Javascript_Mysql_Scripting

Php 在脚本中重复javascript功能，但不包含同一代码的多个实例

php javascript mysql scripting

Php 在脚本中重复javascript功能，但不包含同一代码的多个实例,php,javascript,mysql,scripting,Php,Javascript,Mysql,Scripting,我没有Java脚本的工作知识，我正在努力学习它我有一个带有表的PHP页面。行的第一列有一个下拉列表。当触发onclick事件时，它将基于php-mysql查询填充行中的其他单元格问题是，我的表最多可以由75行组成，就像订单页面一样。我不希望用不同的指针使用相同的javascropt代码75次为了优化页面并降低页面复杂性，有没有更简单的方法？（document.getElementById（“txtHint1”）.innerHTML=“”；）我能用美元吗？如果是，我如何整合它？否则我有什么

我没有Java脚本的工作知识，我正在努力学习它

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

问题是，我的表最多可以由75行组成，就像订单页面一样。我不希望用不同的指针使用相同的javascropt代码75次

为了优化页面并降低页面复杂性，有没有更简单的方法？（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>


函数showUser1（str）
{
如果（str==“”）
{
document.getElementById（“txtHint1”）.innerHTML=“”；
回来
} 
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint1”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“getdata1.php？q=“+str，true”）；
xmlhttp.send（）；
}
函数showUser2（str）
{
如果（str==“”）
{
document.getElementById（“txtHint2”）.innerHTML=“”；
回来
} 
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint2”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“getdata1.php？q=“+str，true”）；
xmlhttp.send（）；
}
您可以通过从调用者传递附加参数使其成为泛型函数
已修改的函数，请注意，函数名已更改为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> 



Edit:将参数名称从index改为num，由于textHint从1开始，因此index具有误导性。
您可以通过从调用者传递附加参数使其成为泛型函数
已修改的函数，请注意，函数名已更改为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开始，所以index有误导性。
以下是简单的方法：
showUser1(str)

变成
showUser1(str, number)

document.getElementById("txtHint"+number).innerHTML="";

及
变成
showUser1(str, number)

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>


以下是简单的方法：
showUser1(str)

变成
showUser1(str, number)

document.getElementById("txtHint"+number).innerHTML="";

及
变成
showUser1(str, number)

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>

在变更处理程序上编写一个通用代码，并在变更处理程序中获取select元素
然后element.parentNode.nextSibling.firstChild将给出您的div标记，然后将其id用于js元素引用并进行正确的php调用。这样，所有html事件下标都是相同的
您还可以编写一个以tr元素（代表用户）为主体的php循环，然后使用上述方法连接javascript。这样，您的html代码和js代码都将减少，您甚至不必显式地命名它们。在更改处理程序中编写一个通用的，并在更改处理程序中获取select元素
然后element.parentNode.nextSibling.firstChild将给出您的div标记，然后将其id用于js元素引用并进行正确的php调用。这样，所有html事件下标都是相同的
您还可以编写一个以tr元素（代表用户）为主体的php循环，然后使用上述方法连接javascript。这样，你的html代码和js代码都会减少，你甚至不必显式地命名它们。
你已经触及了编程最有价值的原则之一：不要重复你自己（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>


函数showUser（userNumber，str）
{
如果（str==“”）
{
document.getElementById（“txtHint”+userNumber）.innerHTML=“”；
回来
} 
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”+userNumber）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“getdata1.php？q=“+str，true”）；
xmlhttp.send（）；
}

现在，在每个表行中，select元素变为：
<select name="users" onchange="showUser(1, this.value)" size=1>



将“1”替换为行号
使用jQuery获取最接近的txtHint元素将是一种更好的代码结构方式，但这有点超出了问题的范围。
您已经触及了编程最有价值的原则之一：不要重复自己（DRY）。编程就是寻找做某事的最有效的方法。不管怎样，这是我的建议