Question

我想通过符号或唯一的颜色来指示当前新添加的用户，例如当某人单击 Save 且该用户是添加的内容应以不同的颜色显示或一眼就突出显示，然后在刷新后消失，就像 stackoverflow 在评论系统中所做的一样。

这是我在此页面中使用index.php的代码的形式，提交表单后，将用户添加到数据库中，然后按降序显示它们。

    <form action="save.php" method="post">
        <div class="text-center" id='input_tag'>
            <input type="text" name="name" id= 'input'>
            <input type="submit" name="submit" class="btn btn-dark  " id = "button" value="Save">
        </div>
    </form>
    <div class="container">
        <div class="row">

                <div class="col-md-4">
                    <table width="100"  class="table" id = 'tb'>
                        <?php 
                            $connect = mysqli_connect('localhost','root','root','user');
                            $query = "SELECT name from userdata order by id DESC";

                            $run = mysqli_query($connect,$query);


                            while($row = mysqli_fetch_array($run))
                            {

                                    echo "<tr>";
                                    echo "<td>".$row['name']."<td>";
                                    echo "</tr>";

                            }   



                         ?>


                    </table>
                </div>


        </div>
</div>

这是save.php，在此用户被添加到数据库，然后重定向到index.php页面

$connect = mysqli_connect('localhost', 'root' ,'root' ,'user');

if($connect){
    if(isset($_POST['submit']))
    {
        $name = $_POST['name'];
        $query = "INSERT INTO `userdata`(`name`) values ('$name')";

        if(mysqli_query($connect,$query)){
            header('location:index.php');

        }
    }

}
else{
    echo "not connected";
}

Answer 1

您可以使用简单的CSS和JS来实现。

将save.php中的标头函数更改为

header('location:index.php?added=1');

将CSS样式添加到index.php

<style type="text/css">
        tr:last-of-type  {
            transition: .7s background;
        }
    </style>

在index.php的末尾添加以下内容

    <?php
  if (isset($_GET['added'])){
  print '<script type="text/javascript">

            document.querySelector("tr:first-of-type").style.background = "red";
            setTimeout(function() {document.querySelector("tr:first-of-type").style.background = unset"},2000);
        </script>';

     }

  ?>

我假设将首先显示新用户。

Answer 2

如果您想第一次以不同的方式显示用户，则需要某种标志，指示是否已显示用户。在插入用户时，将didShow标志设置为false。显示用户时，请检查标志，如果为false，则显示用户使用符号，并将didShow标志设置为true。显示用户时，如果didShow标志为false，则显示没有符号的用户。

在数据库中添加一个名为didShow的新列。将其默认设置为0（否）。

像这样更改查询：

$query = "SELECT id, name, didShow from userdata order by id DESC";

在循环中，使用不同的格式并更新必须更新的行。

$run = mysqli_query($connect, $query);
$style = 'style="color:#ccc"';
while($row = mysqli_fetch_array($run))
{
    echo "<tr>";
    if ( $row['didShow'] == 0 ) {
        echo "<td><span {$style}>".$row['name']."</span><td>";
        $updateQuery = "UPDATE `userdata` SET didShow=1 WHERE id = {$row['id']}";
        mysqli_query($connect, $updateQuery);
    } else {
        echo "<td>".$row['name']."<td>";
    }
    echo "</tr>";

}

用不同的颜色或符号或div高亮指示新添加的用户

2 个答案: