☰

排序的 HTML 表格

tag-icon • tag-icon sort html table
排序的 HTML 表格

我需要一种非常快速且简单的方法来对 HTML 表格进行排序。表行包含应保留在适当行中的图像。我尝试将 HTML 粘贴到 Libre Office calc 中，但图像未粘贴到行中，因此无法进行排序。

顺便说一句，我不想​​要可排序的桌子。我想要一个排序表。完成后，我只想要一个可以粘贴到博客页面中的纯 HTML 表格，但我希望对表格中的项目进行排序。

我想从干净的 HTML 表格开始，将其粘贴到应用程序中，对表格进行排序并获取新的 HTML 源，而不添加任何样式或垃圾。这看起来很简单，但我找不到解决方案。

我希望排序的表格示例：

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"> <a
href="http://example.com/images/a"> <img
src="http://example.com/images/a_thumb.jpeg" alt="image of a"> </a> </td>
<td style="vertical-align: top;">a<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><a
href="http://example.com/images/f"> <img
src="http://example.com/images/f_thumb.jpeg" alt="image of f"> </a> </td>
<td style="vertical-align: top;">f<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><a
href="http://example.com/images/c"> <img
src="http://example.com/images/c_thumb.jpeg" alt="image of c"> </a> </td>
<td style="vertical-align: top;">c<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><a
href="http://example.com/images/b"> <img
src="http://example.com/images/b_thumb.jpeg" alt="image of b"> </a> </td>
<td style="vertical-align: top;">b<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>

答案1

您可以使用前编辑（Vi/Vim 的一部分）如以下 shell 命令所示：

$ ex +"g/<tr/;,/tr>/join" +"/<table\_.\{-}\zs<tr/;,/table>/sort /.\{-}<a href/" +%p -scq! table.html | html2text 
[image of a]
a
[image of b]
b
[image of c]
c
[image of f]
f

上面的示例使用html2text命令行工具显示从 stdin 解析的 HTML（如果需要，请安装）。

要将排序表保存到新文件，请替换+%p -scq!为+'wq! sorted.html'，因此：

ex +"g/<tr/;,/tr>/join" +"/<table\_.\{-}\zs<tr/;,/table>/sort /.\{-}<a href/" +'wq! sorted.html' table.html

解释：

  • +"cmd"- 执行 Vim 命令。
  • g/<tr/;,/tr>/join- 连接<tr/和之间的行tr>（以便于排序）。
  • /<table\_.\{-}\zs<tr/;,/table>/- 选择第一个<tr/和之间的内容/table>。
  • sort /.\{-}<a href/- 对上面选择的从 开始的行进行排序<a href/。
  • +%p-磷rints 缓冲区。
  • -scq!-S默默地q关闭编辑器而不保存。

查看类似的示例这里。

相关内容