現在の行がポールされている場合、次の表の行を表示するJavascript

私はユーザーによってポーリングされたHTML表を持っています。行の最初の列には、mysqlデータベースによって生成されたオプションを選択するドロップダウンボックスがあります。現在の行がポールされている場合、次の表の行を表示するJavascript

これは受注テーブル用であり、注文は1行72行で構成されます。フォームがロードされると、私は1行だけを表示したいだけです。最初の行でオプションを選択すると、2番目の行が表示されます。 2行目からオプションを選択すると、3行目が表示されます。終わりまでの行72は、行71からオプションが選択されている場合にのみ表示されます。

これは意味があると思います。

は以下

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

私は、これは、コーディングのフォーラムではありません知っているが、私は、関連する例えばしばらくの間、ネットを検索し、何も見つからなかった（5行のみのために）私のHTMLテーブルです。私のjavascriptの知識は非常に厳しく制限されています。誰かが正しい方向に私を指すことができれば、それは大いに感謝されます。

おかげに関して、ライアンスミス

更新は1月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関数が正しく呼び出されていないようです。

おかげで、よろしく、

ライアン・スミス

出典

2012-01-16 Smudger

は順番に行のためのIDを設定しないと、ディスプレイにすべての行の表示プロパティを設定します。最初のものを除くとshowUserでどれも、メソッドは、選択を実行しながら各行で呼び出され、display：blockに続く行の表示を設定します。あなたはそれを働かせます。例えば

：

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

編集パート

[OK]を

私はあなただけのタグでサイズ= 2に= 1のサイズを変更したいものを推測しています。ドロップダウンリストボックス内で値を取得します。 Jan17 上

編集ホープこれはあなたを助け

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

下に示すように、ちょっとあなたの関数を変更します。

出典

2012-01-16 13:10:50 AmGates

こんにちはAmGates、ありがとうございました。私はドロップダウンリストの内容がドロップダウンリストの外に表示されるようにしました。私が間違っていることは、以下のコードに従ってください： – Smudger

元の質問に**編集**を追加し、コメントを明確にすることをお勧めします。ご覧のとおり、コメントでコードを読むのは難しいです;-)幸いです。 – shellter

@ Ryan Smithねえ、私の回答を編集しました。あなたの問題を解決することを願っています。 – AmGates

私は最終的な解決策と完全なコードをここに掲載します。これは@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); 
?>

おかげで再び、このサイト上のすべての人に、本当に感謝しています。

出典

2012-01-18 09:19:40 Smudger

現在の行がポールされている場合、次の表の行を表示するJavascript

答えて

関連する問題