Question

我正在尝试从数据库中获取数据，并且需要将一个数据显示在范围滑块中。我使用PHP foreach来显示数据。但是，如何以范围滑块形式显示其中一个数据？我不知道在表格上显示范围滑块值。有谁知道怎么做？

更新了代码

<?php 
try{
$con = new PDO("mysql:host=localhost;dbname=gcmes", "root", "");
$sql = $con->query("SELECT * FROM details");


echo"<table class='info' align='center'>";
echo"<tr><td width='10'><b>No</b></td>
<td width='30'><b>Category</b></td>
<td width='50'><b>Job</b></td>
<td width='40'><b>Evaluate</b></td>
<td width='30'><b>Marks</b></td><tr>";
foreach($sql as $row) {
$Item = $row["Item"];
$Category = $row["Category"];
$Job = $row["Job"];
$Evaluate = $row["Hole 6"];
echo'
    <tr>
        <td>' . $Item . '</td>
        <td>' . $Category . '</td>
        <td>' . $Job . '</td>
        <td><div id="slidecontainer"><input type="range" min="1" max="5" value="' . $Evaluate . '" class="slider" id="myRange">
        </td>
        <td><span id="demo"></span>
        <script>
        var slider = document.getElementById("myRange");
        var output = document.getElementById("demo");
        output.innerHTML = slider.value;
        slider.oninput = function() {
          output.innerHTML = this.value;
          }
          </script>
          </td>
    </tr>
';

}
echo"</table>"; 
}
catch(PDOException $e) { echo "error".$e->getMessage(); }
?>

现在我面对的表只显示其中一个滑块的值，而不是显示值，但滑块有值。图像将显示结果

image

代码错了吗？谁知道？感谢

Answer 1

如果$Hole6是数字值，您可以使用默认的range slider

更改以下行：

echo"<tr><td>$Item</td><td>$Category</td><td>$Job</td><td>$Evaluate</td><td>$Hole6</td></tr>";

到

echo'
        <tr>
            <td>' . $Item . '</td>
            <td>' . $Category . '</td>
            <td>' . $Job . '</td>
            <td>' . $Evaluate . '</td>
            <td><input type="range" min="1" max="100" value="' . $Hole6 . '"></td>
        </tr>
    ';

第二部分;你可以用jQuery做到这一点非常简单。我给你举了一个例子：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<table>
    <tr>
        <td><input type="range" min="1" max="100" value="50" id="slider1"></td>
        <td><span id="value1">50</span></td>
    </tr>
    <tr>
        <td><input type="range" min="1" max="100" value="70" id="slider2"></td>
        <td><span id="value2">70</span></td>
    </tr>
</table>
<script>
    $(document).ready(function() {
        $('input[type=range]').on("input", function () {
            var sid = this.id.substr(6);
            var val = $(this).val();
            $("#value" + sid).text(val);
        });
    })
</script>
</body>
</html>

Answer 2

首先用<table>

打包<form action="yourfile.php" method="post">

然后将name属性添加到滑块。

<td><div id="slidecontainer"><input type="range" min="1" max="5" value="$Evaluate" name="slider" class="slider" id="myRange">

在<input type="submit" name="submit" value="Submit"/>关闭之前，您需要</form>。

在<?php?>内，你需要检查：

if (isset($_POST['submit'])) //if submit is pressed { $newValueOfSlider = $_POST['slider']; //this takes the value of the slider }

然后将您的变量添加到SQL查询以更新数据库。

更新：如何在范围滑块中显示数据表单数据库？

2 个答案: