HTML 使用Thymeleaf迭代和索引进行循环

在本文中，我们将介绍如何使用Thymeleaf模板引擎在HTML中进行迭代和索引操作。Thymeleaf是一个功能强大的Java模板引擎，广泛用于实现动态Web页面。

阅读更多：HTML 教程

迭代循环

在HTML中使用Thymeleaf进行迭代循环非常简单。我们可以使用Thymeleaf的th:each属性实现迭代。这个属性可以应用在任何HTML标签上，用来迭代一个集合中的元素。

下面是一个示例，展示如何使用Thymeleaf迭代一个名为users的用户列表：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="user : {users}">
            <td th:text="{user.id}"></td>
            <td th:text="${user.name}"></td>
        </tr>
    </tbody>
</table>

在上面的示例中，我们使用了th:each="user : ${users}"来迭代users集合中的每个元素。在每次迭代时，Thymeleaf会将当前元素赋值给user变量，我们可以在标签内部使用该变量的属性。

使用索引

有时候我们需要在迭代循环中使用索引，以便对每个元素进行编号或者其他操作。Thymeleaf提供了th:each属性的扩展功能，我们可以使用th:each-index属性来获取当前元素的索引。

下面是一个示例展示了如何使用索引迭代一个列表：

<ul>
    <li th:each="item, stat : {items}" th:text="{item}" th:class="${stat.index % 2 == 0} ? 'even' : 'odd'"></li>
</ul>

在这个示例中，我们使用了th:each="item, stat : ${items}"来迭代items列表，并且使用了stat.index来获取当前元素的索引。然后根据索引的奇偶性来添加不同的样式，实现了隔行变色的效果。

示例

为了更好地理解Thymeleaf中的迭代和索引操作，让我们来看一个更复杂的示例。假设我们有一个名为students的学生列表，我们想要在HTML中显示每个学生的姓名和成绩，并且要给予优秀学生特殊的标记。

public class Student {
    private String name;
    private int score;

    // 省略构造函数和getter/setter
}

@Controller
public class StudentController {

    @GetMapping("/students")
    public String getStudents(Model model) {
        List<Student> students = new ArrayList<>();
        students.add(new Student("小明", 80));
        students.add(new Student("小红", 90));
        students.add(new Student("小刚", 95));
        students.add(new Student("小李", 70));
        students.add(new Student("小王", 85));
        model.addAttribute("students", students);
        return "students";
    }
}

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="student, index : {students}"
            th:class="{student.score >= 90} ? 'excellent' : ''">
            <td th:text="{student.name}"></td>
            <td th:text="{student.score}"></td>
        </tr>
    </tbody>
</table>

在这个示例中，我们首先创建了一个Student类来表示学生对象，并在StudentController中提供了getStudents方法来返回学生列表。然后，在HTML中使用Thymeleaf迭代students列表，并使用th:each和th:class来根据成绩判断是否为优秀学生。

总结

通过本文，我们了解了如何使用Thymeleaf模板引擎在HTML中进行迭代和索引操作。我们学习了如何使用th:each属性来实现迭代循环，并使用th:each-index属性来获取索引值。通过示例，我们进一步加深了对Thymeleaf中迭代和索引的理解，并展示了如何在HTML中应用这些功能。

Thymeleaf是一个功能强大而灵活的模板引擎，它的迭代和索引功能可以帮助我们更好地处理数据集合，实现更加动态和交互的Web页面。