Javascript, чтобы показать следующую строку таблицы, если текущая строка poulated

У меня есть HTML-таблица, которую надувает пользователь. У первого столбца в строке есть выпадающий список, в котором они выбирают параметр, сгенерированный базой данных MySQL.

Это для таблицы заказов, и заказ может состоять из 1 строки в 72 строки. Когда форма загружается, я хочу, чтобы отображалась только 1 строка. При выборе опции в первом ряду должна появиться вторая строка. когда опция выбрана во 2-й строке, появляется 3-я строка. и вплоть до конца, где строка 72 появляется, только если опция выбрана из строки 71.

Я надеюсь это имеет смысл.

Ниже моя таблица 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 очень сильно ограничены, и если бы кто-то мог указать мне правильное направление, это было бы очень признательно.

Спасибо и всего наилучшего, Райан Смит

Обновление 17 января 2012 г.

Ниже, пожалуйста, найдите упрощенный скрипт, который я не могу заставить работать правильно.

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

Похоже, что функция javascript вызывается неправильно при событии on change.

Спасибо и С уважением,

Райан Смит

Источник

2 ответа

Решение

Установите идентификаторы для строк в последовательном порядке, а затем установите отображаемое свойство каждой строки: ни один, кроме первой и в методе 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
}

Редактировать часть

Хорошо, я думаю, что вы хотите, просто измените размер =1 на размер =2 в теге. Вы получите значения в самом выпадающем списке.

Редактировать на 17 января Эй, измените свою функцию, как показано ниже

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

Надеюсь, это поможет вам.

Источник

Думаю, я опубликую окончательное решение здесь и полный код. Большое спасибо @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);
 ?>

Еще раз спасибо всем на этом сайте, очень ценю.

Источник
Другие вопросы по тегам