如果填充了当前行，则Javascript显示下一个表行

时间：2012-01-16 12:55:05

标签： javascript hide show selected tablerow

我有一个由用户包含的HTML表格。行中的第一个列有一个下拉框，用于选择mysql数据库生成的选项。

这是订单表，订单可以包含1行到72行。加载表单时，我只想显示1行。当在第一行上选择一个选项时，必须出现第二行。从第2行中选择选项时，将显示第3行。并且如果从第71行中选择了一个选项，则只会出现第72行。

我希望这是有道理的。

下面是我的HTML表格（仅限5行）

<table>
<tr>
    <td>
        <select name="users" onchange="showUser(1, 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="showUser(2, 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>

<tr>
    <td>
        <select name="users" onchange="showUser(3, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint3"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser(4, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint4"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser(5, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint5"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

</table>

我知道这不是一个编码论坛，但我已经在网上搜索了一段相关的例子并没有发现任何内容。我的javascript知识非常有限，如果有人能指出我正确的方向，我将非常感激。

谢谢和问候， 莱恩史密斯

2012年1月17日更新。

下面请找一个我无法正常工作的简化脚本。

<html>
 <head>

<script type="text/javascript"> 
  function showUser(userNumber, str) 
    {
    document.getElementById("r"+index).style.display="block" 
    }
</script> 

 </head>
 <body>


<table> 
<tr id="r1"> 
<td><select name="users" onchange="showUser(1, this.value)">  
        <OPTION VALUE=1> 
        1 
        </option> 
        <OPTION VALUE=2> 
        2
        </option>
        <OPTION VALUE=3> 
        3 
        </option> 
        </SELECT> 
</td> 
</tr> 
<tr id="r2" style="display:none;"> 
<td><select name="users" onchange="showUser(2, this.value)">  
        <OPTION VALUE=1> 
        1 
        </option> 
        <OPTION VALUE=2> 
        2
        </option>
        <OPTION VALUE=3> 
        3 
        </option> 
        </SELECT> 
</td> 
</tr> 
</tr> 
<tr id="r3" style="display:none;"> 
<td><select name="users" onchange="showUser(3, this.value)">  
        <OPTION VALUE=1> 
        1 
        </option> 
        <OPTION VALUE=2> 
        2
        </option>
        <OPTION VALUE=3> 
        3 
        </option> 
        </SELECT> 
</td> 
</tr> 
</table> 

</body>
 </html>

使用on change事件似乎没有正确调用javascript函数。

谢谢和问候，

瑞安史密斯

2 个答案:

答案 0 :(得分：1)

按行顺序设置行的ID，然后将每行的display属性设置为display：none，除了第一行和在执行选择时每行调用的showUser方法中，设置显示为要显示的后续行：块。你会得到它。

例如：

<table>
<tr id="r1">
<td><select name="users" onchange="showUser(2, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> </option>
        </SELECT>
</td>
</tr>
<tr id="r2" style="display:none;">
<td><select name="users" onchange="showUser(3, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> </option>
        </SELECT>
</td>
</tr>
</table>
function showUser(index,val)
{
 document.getElementById("r"+index).style.display="block"
//your code
}

修改零件

好的我猜你想要的只是在标签中将size = 1更改为size = 2。您将在下拉列表框中获取值。

1月17日编辑 嘿改变你的功能，如下所示

<script type="text/javascript"> 
  function showUser(userNumber, str) 
    {
    document.getElementById("r"+(userNumber+1)).style.display="block" 
    }
</script>

希望这会对你有所帮助。

答案 1 :(得分：0)

以为我会在这里发布最终解决方案和完整代码。非常感谢@AmGates关于这个。

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

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

相关问题
最新问题