AnyMath 文档
Notebook

创建HTML表格

本示例演示了如何使用Julia语言中的专用函数tag 生成HTML表格。

简介

创建 HTML 表格的算法旨在解决生成 HTML 页面动态内容的问题。 在此示例中,我们采用编程方式生成 HTML 格式的表格数据——这对于编制报告、展示计算结果,或任何需要行和列数据结构的其他用途都非常有用。

HTML表格由<table><thead> /<tbody><tr> (行)、<th> (表头)和<td> (单元格)等元素组成。 我们将利用基于tag 函数的简单且便捷的结构,实现整个流程的自动化。该函数允许灵活地设置标签及其属性,而无需了解HTML语法的所有细节。

tag 函数

tag 函数接受标签名(第一个参数)和属性对列表name => value 。它会生成如下格式的HTML标记字符串:

In [ ]:
"""
函数 tag(x::Pair, attr::Pair...) 用于生成 HTML 标签。
:param x: 形式为 (:TagName => Content) 的参数对
:param attr: 可变数量的 :AttributeName => Value 对
:return: 标签的字符串表示形式
"""
function tag(x::Pair, attr::Pair...)
    t, b = x       # 提取标签名称(t)和标签内容(b)
    attrstr = join(" $n=\"$p\"" for (n, p) in attr)  # 收集属性字符串
    return "<$t$attrstr>$b</$t>"            # 自己构建标签
end
Out[0]:
tag

生成表格列(colnames

下一步是确定表格的列名。通过使用split() 函数,将字符串",X,Y,Z"按逗号分隔来获取列名。

数组colnames 将包含字符串数组["", "X", "Y", "Z"]

In [ ]:
# 将字符串“X,Y,Z”按逗号(',')分隔,以获取列名列表。
# 最终,我们在第一个逗号前得到一个空格——这就是左侧列的标题。
colnames = split(",X,Y,Z", ',')
Out[0]:
colnames

生成标题行(<thead>

生成表头行——每个列名都被包裹在<th> HTML标签中。随后,所有单元格通过join(...) 并行处理,使用\n 进行合并。

这部分内容将在后续生成表格表头时,被用于<tr> 标签内部。

In [ ]:
# 创建包含表格标题的行。为每个单元格添加 th 标签。
header = join(tag(:th => txt) for txt in colnames) * "\n"
Out[0]:
header

准备数据行(<tbody>

接下来生成表格主体中的数据行。通过循环遍历1到6:

  • 针对每个编号i ,生成一行<tr>- 第一单元格采用样式bold ,其余三个单元格的数值为1000到9999之间的随机数

字符串输出保存在集合中:rows

In [ ]:
# 生成表格行——每行包含若干个包含随机值的td单元格。
rows = collect(
    tag(:tr => 
        join(
            tag(:td => i, :style => "font-weight: bold;") * 
            join(tag(:td => rand(1000:9999)) for j in 1:3)
        )
    ) for i in 1:6
)
Out[0]:
rows

标题与数据的组合

构建最终结构<tbody> ,在表格字符串块的两侧添加换行符。

In [ ]:
# 将所有包含数据的行合并到表格主体的一个区块中。
body = "\n" * join(rows, '\n') * "\n"
Out[0]:
body

表格的最终组装

最后一步是将所有内容整合在一起:将准备好的部分放入<table> 标签中,该标签也有其自身的属性。在此示例中,表格宽度设置为60%。

最终结构:

将整个表格组合到<table> 标签中。

In [ ]:
table = tag(:table => string('\n', header, body, '\n'), :style => "width: 60%")
Out[0]:
"<table style=\"width: 60%\">\n<th></th><th>X</th><th>Y</th><th>Z</th>\n\n<tr><td style=\"font-weight: bold;\">1</td><td>9971</td><td>7158</td><td>9406</td></tr>\n<tr><td style=\"font-weight: bold;\">2</td><td>8512</td><td>6578</td><td>5560</td></tr>\n<tr><td style=\"font-weight: bol" ⋯ 51 bytes ⋯ "tr>\n<tr><td style=\"font-weight: bold;\">4</td><td>5204</td><td>6699</td><td>7601</td></tr>\n<tr><td style=\"font-weight: bold;\">5</td><td>3784</td><td>7417</td><td>8041</td></tr>\n<tr><td style=\"font-weight: bold;\">6</td><td>1713</td><td>9585</td><td>2317</td></tr>\n\n</table>"

最终生成的HTML结果。

In [ ]:
print(table)
<table style="width: 60%">
<th></th><th>X</th><th>Y</th><th>Z</th>

<tr><td style="font-weight: bold;">1</td><td>9971</td><td>7158</td><td>9406</td></tr>
<tr><td style="font-weight: bold;">2</td><td>8512</td><td>6578</td><td>5560</td></tr>
<tr><td style="font-weight: bold;">3</td><td>6905</td><td>5379</td><td>6109</td></tr>
<tr><td style="font-weight: bold;">4</td><td>5204</td><td>6699</td><td>7601</td></tr>
<tr><td style="font-weight: bold;">5</td><td>3784</td><td>7417</td><td>8041</td></tr>
<tr><td style="font-weight: bold;">6</td><td>1713</td><td>9585</td><td>2317</td></tr>

</table>

将生成的结果复制并粘贴到Markdown文本框中进行验证:

XYZ
1997171589406
2851265785560
3690553796109
4520466997601
5378474178041
6171395852317

结论

我们探讨了动态生成HTML表格算法的实现。我们创建了一个自定义函数tag ,它能够轻松组合任何HTML元素,包括带有属性的复杂标签。 基于该函数,我们成功地构建了表格的行和列,并生成了表头和数据。

此类方法广泛应用于报告生成、数据分析、界面自动生成,甚至以HTML格式导出数据。 现在,您可以在自己的项目中应用这个模板了!

本示例基于 Rosetta Code 的资料开发