次のドロップダウンメニューと同じようにHTML5範囲の「スライダー」を作成します。

Question

データベースから入力されるドロップダウンメニューがあります。メニューの値を選択すると、データベースから選択されたデータの表が表示されます。これをHTML5の範囲スライダに変更したいと思います。今のところ運がない。また、私はそれに沿って移動すると、範囲の横に値（日付）を表示したい。 これは、ドロップダウンメニューのコードです：

// Set SQL string 
$query = "SELECT * FROM Test"; 
// Execute SQL 
$result = mysql_query($query); 
// Find number of rows in the resulting recordset array 
$num = mysql_numrows($result); 

// Initialise loop counter 
$i = 0;  

echo ("<form><select name='users' onchange='showUser(this.value)'>"); 

// Loop through recordset until end 
while ($i < $num) { 
    // Associate variables for result at position i at table location specified 
    $Time = mysql_result($result, $i, "Time"); 

    // Echo each entry as an OPTION for the Select List 
    echo ("<option value=\"$Time\">$Time</option>"); 

    // Increment Loop Counter 
    $i++; 
} 
echo ("</select></form><br>"); 

gettime.php：以下

$sql = "SELECT * FROM Test WHERE Time = '" . $q . "'"; 

$resultb = mysql_query($sql); 
if (!$resultb) { 
    echo "<p>The following SQL failed</p><p>" . $sql . "</p>"; 
} 


echo "<table border='1'> 
    <tr> 
    <th>Time</th><th>First PC Room</th> 
    <th>First Group Study Room 1</th> 
    <th>First Group Study Room 2</th> 
    <th>First Main Room</th> 
    </tr>"; 


while ($rowb = mysql_fetch_array($resultb)) { 

$bmsTime = $rowb['Time']; 
//Convert Excel Timestamp of DB to Unix Timestamp 
$unixtime=($bmsTime-25569)*86400; 
$readable=date('l jS \of F Y h:i:s A',($unixtime)); 
    echo "<tr>"; 
    echo "<td>" . $readable . "</td>"; 
    echo "<td>" . $rowb['firstPCroom'] . "</td>"; 
    echo "<td>" . $rowb['firstGrpStdyRm1'] . "</td>"; 
    echo "<td>" . $rowb['firstGrpStdyRm2'] . "</td>"; 
    echo "<td>" . $rowb['firstmainroom'] . "</td>"; 
    echo "</tr>"; 
} 
echo "</table>"; 

することは、私が "スライダー" で、これまで持っているものです。

echo "<input id='slider' type='range' min='0' max=\"$num\" step='any' /> 
        <span id='range'> </span>"; 

?> 
<script> 
    var selectmenu=document.getElementById("slider"); 
    var colorchange; 
    selectmenu.onchange=function changecolour(){ 

    if (selectmenu.value<"0.5") 
    {colorchange=0} 

    else if (selectmenu.value>="0.5") {colorchange=Math.round(selectmenu.value)} 
    document.getElementById("range").innerHTML=colorchange; 
    } 
</script> 

どれでも助けが大いに評価されるだろう！ありがとう

Answer 1

ここには、jsFiddleがjQueryを使用してテーブル行を更新します。おそらくあなたはAJAX呼び出しでデータを置き換えます。

正確にに問題があった場合は、他の人があなたのニーズに合ったソリューションを調整することができます。