html 列表循环 java ul-CFANZ编程社区

用Java生成HTML列表并使用循环

在Web开发中，常常需要根据数据动态生成HTML列表。这种需求在需要展示菜单、用户列表、产品条目等场景时都十分普遍。本文将介绍如何使用Java中的循环结构生成HTML ul 列表，并通过代码示例来帮助理解这一过程。

HTML列表基础

HTML 中的列表分为有序列表 (ol) 和无序列表 (ul)。无序列表使用 ul 标签为容器，并由多个 li 标签组成，用来定义列表中的每一项。

例如，以下是一个简单的无序列表示例：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

Java生成HTML无序列表

在Java中，可以通过循环结构来动态生成该HTML结构。例如，当我们从数据库中读取用户的名称时，可以通过循环将这些名称包含在无序列表中。

以下是一个使用Java的方法，接受一个字符串数组并返回生成的HTML无序列表：

public class HtmlListGenerator {
    public static String generateHtmlList(String[] items) {
        StringBuilder html = new StringBuilder();
        html.append("<ul>\n");
        
        for (String item : items) {
            html.append("    <li>").append(item).append("</li>\n");
        }
        
        html.append("</ul>");
        return html.toString();
    }

    public static void main(String[] args) {
        String[] fruits = {"苹果", "香蕉", "橙子", "葡萄"};
        String htmlList = generateHtmlList(fruits);
        System.out.println(htmlList);
    }
}

在这个例子中，我们定义了一个 HtmlListGenerator 类，其中包含一个 generateHtmlList 方法。这个方法接收一个字符串数组，并使用 StringBuilder 来动态构建 HTML 列表。通过 for 循环遍历数组中的每一项，并将其包裹在 li 标签中。

输出示例

运行上述代码，输出的 HTML 列表为：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>葡萄</li>
</ul>

使用表格展示数据

除了列表，我们还可能需要以表格的形式展示数据。表格的创建和列表类似，可以通过循环将数据填充到HTML表格结构中。以下是生成HTML表格的示例代码：

public class HtmlTableGenerator {
    public static String generateHtmlTable(String[][] data) {
        StringBuilder html = new StringBuilder();
        html.append("<table border='1'>\n");

        for (String[] row : data) {
            html.append("    <tr>\n");
            for (String cell : row) {
                html.append("        <td>").append(cell).append("</td>\n");
            }
            html.append("    </tr>\n");
        }

        html.append("</table>");
        return html.toString();
    }

    public static void main(String[] args) {
        String[][] fruitsData = {
            {"名称", "颜色", "价格"},
            {"苹果", "红色", "3元"},
            {"香蕉", "黄色", "2元"},
            {"橙子", "橙色", "2.5元"},
        };
        String htmlTable = generateHtmlTable(fruitsData);
        System.out.println(htmlTable);
    }
}

在这个例子中，HtmlTableGenerator 类将输入的二维数组转换为HTML格式的表格。使用两层循环，一层用来生成表格的行 (tr)，另一层用来生成单元格 (td)。

输出示例

运行上述代码，输出的 HTML 表格为：

<table border='1'>
    <tr>
        <td>名称</td>
        <td>颜色</td>
        <td>价格</td>
    </tr>
    <tr>
        <td>苹果</td>
        <td>红色</td>
        <td>3元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>黄色</td>
        <td>2元</td>
    </tr>
    <tr>
        <td>橙子</td>
        <td>橙色</td>
        <td>2.5元</td>
    </tr>
</table>

甘特图示例

除了列表和表格，计划和进度的可视化展示也非常重要。甘特图是项目管理中非常常用的工具。下面用 Mermaid 语法来表示一个简单的甘特图：

gantt
    title  项目进度
    dateFormat  YYYY-MM-DD
    section 开发
    设计       :a1, 2023-09-01, 30d
    编码       :after a1  , 40d
    测试       : 20d
    section 文档
    编写文档   :2023-10-01  , 20d