如何在 HTML/PHP 中为每个 div 动态分配一个单独的 id？

Question

我是 webdesign 新手，我在 Web 服务器上创建了一个 mySQL 数据库，该数据库包含一个包含许多 ToDo 的表。 然后我使用 PHP 从 mySQL 数据库加载该表，并为网页上的每个 ToDo 创建一个 div。 我正在为下一步努力，即根据 ToDo 的紧迫性为每个 div 赋予不同的颜色，在 mySQL 表中将其编码为 integer。 我想我需要根据紧急程度指定不同的 ID，因此在显示 div 时，HTML 将通过使用与 id 关联的正确样式为其提供正确的颜色。

<html>
    <head>

    <style>

        #fenster{
            width : 200px;
            background-color: yellow;
        }
        #zeile{
            height: 40px;
            width: 300px;
            border: thin solid gray;
            border-top: thick solid red;
            margin: 5px;
            text-overflow: hidden;
            overflow: hidden;
            float: left;
            font-size: 1.0rem;
        }

@media only screen and (max-width: 1000px) {
    #zeile{
        height: 115px;
        width: 270px;
        font-size: 1.5rem;
        margin: 1rem;
        overflow:hidden;
    }
}

        .kaestchen {
        color: red;
        }


</style>
</head>

<body>
<?php 
$con = mysqli_connect("localhost","xxxxxx","xxx","xxxx");
$sqlCom = 'SELECT name FROM zeilen';
$requ = mysqli_query($con, $sqlCom);
$personen = mysqli_fetch_all($requ, MYSQLI_ASSOC);
mysqli_close($con);
?>

<div>
<div>
    <?php foreach($personen as $person){ ?>

        <div>
            <div>
                <div>
                    <div id=zeile left=100px onclick=window.location.href='edit.php?itemID=20'><?php echo htmlspecialchars($person['name']); ?></div>
                </div>
            </div>
        </div>
    <?php } ?>

</div>
</div>

</body>

</html>

我认为我需要做的是找到一种方法来为每个 div 动态分配一个单独的 id，这将允许我控制 div 的颜色，例如 id=urg0、id=urg1 等。另外我想通过 id ToDo 到“编辑”页面，所以我想我必须创建另一个 PHP 页面，该页面将从数据库中加载此特定 ToDo 的数据以进行编辑并获取作为参数传递的 id。 在我的示例中，这是一个固定数字，因为我想不出办法让这个数字成为计数器变量。

我需要使用 Javascript 来进行这种“复杂”的操作吗？

Answer 1

不需要 Javascript。

一种方法是为每个紧急情况定义一个 css 规则。

将 div 上的类用作<div class="urgency-x"> ，其中 x 是紧急编号

<head>
<style>
.urgency-1 {
  background-color: #CCCCCC;
}
.urgency-2 {
  background-color: #BBBBBB;
}
.urgency-n {
  background-color: #111111;
}
</style>
</head>

上面显示了在头部定义的规则。 显然，您可以将它们放在 .css 文件中，但那是另一回事了。

您仍然可以编写 css 规则以匹配 id，但这些 id 通常用于将元素分开，因此具有相同 id 的多个元素是不常见的。 类是以某种方式对元素进行分类，因此对于您提供的用例而言，使用类更为典型。

另一种方法是在您的 div 上设置style ，例如<div style="background-color: #CCCCCC;">

就将待办事项 ID 传递到另一个页面而言，您可能会有某种排序或 ui 元素，用户“单击”以导航到编辑页面。 一个非常基本的例子是锚

<a href="edit.php?id=5">Edit me</a>

这是一个在 php 方面解决的问题How to pass a PHP variable using the URL

如何在 HTML/PHP 中为每个 div 动态分配一个单独的 id？

问题描述

1 个解决方案

解决方案1
0 2022-08-12 15:21:48

如何在 HTML/PHP 中为每个 div 动态分配一个单独的 id？

问题描述

1 个解决方案

解决方案1 0 2022-08-12 15:21:48

解决方案1
0 2022-08-12 15:21:48