如何简单地使我的 HTML 表格变得“动态”？

发布于 2024-09-29 21:58:48 字数 236 浏览 4 评论 0 原文

我正在用 Perl 编写 Multimarkdown 来创建 HTML 表。

我想知道是否有一种简单的方法可以使表格动态化，即允许查看者通过单击列标题对其进行排序，甚至通过输入简单的规则来过滤记录。

我真的不懂 HTML。我用 Perl 编码，只生成 HTML（实际上，Multimarkdown 转换为 HTML）以很好地输出一些数据。我提到这一点是因为我确信有多种方法可以创建漂亮的动态表格，但我真的在寻找一种简单的方法。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨曦慕雪 2024-10-06 21:58:48

简单方法是使用已经支持此类功能的工具包/库。

（在 Google 上快速搜索“排序 javascript 表”来自 JavaScript 工具箱的排序/过滤表格, 使用 JavaScript 对 HTML 表进行排序（更多示例）和 jQuery 插件：Tablesorter 2.0。）

AJAX 是一种可用于动态获取数据的机制 - 但是，如果所有数据已存在于表中和/或表不需要分页，则这太过分了。这两种方法都需要启用客户端 JavaScript。（非客户端替代方案是回发并让服务器完成工作并生成新的 HTML。但这就是 Web 一点点哦:-)

CSS（层叠样式表）仅用于应用颜色、背景图像、字体或边框等样式（CSS 选择器可以基于 CSS 类工作通常在 HTML 元素 class 属性中提供。文档只是简单地说明一些预定义的 CSS 类名称是由 JavaScript 动态添加的，因此。可以轻松地“选择”样式 - 例如，将排序后的列变成石灰绿色）。 CSS 本身无法控制排序或过滤。

Daxim 建议 Stuart Langridge 的排序表在以下问题中进行了讨论：
如何使用 Perl 与表头关联的超链接中的查询字符串进行客户端排序？（如果此编辑有用，请在那里投票 daxim :-)

快乐编码。

回复收藏 0 原文

痴梦一场 2024-10-06 21:58:48

Yahoo YUI 的数据表控件具有内置的列排序功能。

YUI 有大量的 js 函数，您可以直接调用和使用。

回复收藏 0 原文

情话墙 2024-10-06 21:58:48

我使用了下面的代码：

$sql= "select * from table";
$sth = $dbh->prepare($sql);
$sth->execute() or die "Cannot execute sth: $DBI::errstr";
my $fields = join(',', @{ $sth->{NAME} });
my @th = split(',',$fields);
print '<table><thead><tr>';
foreach(@th){
  print '<th>'.$_.'</th>';
}
print '</tr></thead><tbody>';
while (my @next_row_fields = $sth->fetchrow_array()) {
  print '<tr>';
  foreach(@next_row_fields){
    print '<td>'.$_.'</td>';
  }
  print '</tr>';
}
print '</tbody></table>';

I used the code below:

$sql= "select * from table";
$sth = $dbh->prepare($sql);
$sth->execute() or die "Cannot execute sth: $DBI::errstr";
my $fields = join(',', @{ $sth->{NAME} });
my @th = split(',',$fields);
print '<table><thead><tr>';
foreach(@th){
  print '<th>'.$_.'</th>';
}
print '</tr></thead><tbody>';
while (my @next_row_fields = $sth->fetchrow_array()) {
  print '<tr>';
  foreach(@next_row_fields){
    print '<td>'.$_.'</td>';
  }
  print '</tr>';
}
print '</tbody></table>';

回复收藏 0 原文