javascript - html5建表

Question

我需要在 HTML5 中构建表格。该表的要求是:

1. 允许折叠/展开

2. 突出显示选定的行

3. 鼠标悬停变化

建表的最佳方法是什么？ (这意味着它对用户来说会很好看)

我需要在 jquery 中使用吗？

HTML5 中的表格有什么特别之处吗？

Answer 1

虽然不是 100% 必要，但为了简单和轻松的跨浏览器兼容性，我会使用 jQuery。

要使您的行展开和折叠，您需要设置您的表格，以便每行下面都有一行可以是 toggled (hidden/shown)单击其上方的行。

快速搜索显示a little jquery plugin that has done this already .即使您不使用它，它也可以作为一个很好的例子。

单元格高亮显示可以在 jQuery 中完成。就这样when a cell is clicked它adds a class to it具有您想要的 CSS 属性。

$("td").toggle(function() {
     $(this).addClass("highlight-clicked");
}, function() {
     $(this).removeClass("highlight-clicked");
});

Mouseover events can be done in jQuery too .与上面的代码非常相似。

$("td").hover(function() {
     $(this).addClass("highlight-hover");
}, function() {
     $(this).removeClass("highlight-hover");
});

为了更好地展示，here's a little jsfiddle I whipped up