Javascript html5中的构建表

我需要在HTML5中构建表。 该表的要求如下：

允许折叠/展开

突出显示选定行

Moues悬停变化

做桌子最好的方法是什么？（这意味着用户会觉得它很好看）

我需要在jquery中使用吗

---

HTML5中的表有什么特别的功能吗？

虽然不是100%必需的，但为了简单和易于跨浏览器兼容，我会使用jQuery

要使行展开和折叠，您需要设置表，使每一行下面都有一行，可以通过单击上面的行来进行设置

一个快速的搜索出现了。即使你不使用它，它也可以作为一个很好的例子

单元格高亮显示可以在jQuery中完成。 只要使它具有您想要的CSS属性即可

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

。与上面的代码非常相似

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

为了更好地演示，

名字
姓氏
彼得
格里芬
露易丝
格里芬

//===============================================//

   $(document).ready(function () {
        //$('body').html('<table id="tblTest"><tr><th>Firstname</th><th>Lastname</th></tr><tr class="Highlight"><td>Peter</td><td>Griffin</td></tr><tr class="Highlight"><td>Lois</td><td>Griffin</td></tr></table>');

        $('#btnExpCol').click(function () {
            if ($(this).val() == 'Collapse') {
                $('#divTest').stop().slideUp('3000');
                $(this).val('Expand');
            } else {
                $('#divTest').stop().slideDown('3000');
                $(this).val('Collapse');
            }
        });

        //$('#tblTest').find('.Highlight').live('click', function () {
        //    $(this).toggleClass('Red');
        //});

        $('#tblTest').find('.Highlight').click(function () {
            $(this).toggleClass('Red');
        });

        $('#tblTest').find('.Highlight').live({
            mouseenter: function () {
                $(this).addClass('Blue');
            },
            mouseleave: function () {
                $(this).removeClass('Blue');
            }
        });
    });

$（文档）.ready（函数（）{
//$（'body'）.html（'firstnamelastnameptergriffinloisgriffin'）；
$（'#btnExpCol'）。单击（函数（）{
if（$（this）.val（）=='Collapse'）{
$（'#divTest'）.stop（）.slideUp（'3000'）；
$（this.val（'Expand'）；
}否则{
$（'#divTest'）.stop（）.slideDown（'3000'）；
$（this.val（'Collapse'）；
}
});
//$（“#tblTest”）.find（“.Highlight”）.live（'click'，function（）{
//$（this.toggleClass（'Red'）；
//});
$（'#tblTest'）。查找（'.Highlight'）。单击（函数（）{
$（this.toggleClass（'Red'）；
});
$（'#tblTest'）。查找（'.Highlight'）。实时({
鼠标指针：函数（）{
$（this.addClass（'Blue'）；
},
mouseleave:function（）{
$（this.removeClass（'Blue'）；
}
});
});

---

为什么不使用CSS？它具有上述所有的礼节。有一个table元素。您可以使用JS而不是jQuery，我还建议使用CSS，它将允许突出显示。你可以给一行一个类，只是使背景不同的颜色。这是一个动态表吗？@Flo什么事件以及允许折叠/展开突出显示选定行的位置应该发生？@Andreas这是一个不错的起点，但作为任何其他与web相关的概念，它需要更多的研究，所以从这个意义上说，我同意你的看法。实际上，问题是如何突出显示选定行，而不是单元格。

   $(document).ready(function () {
        //$('body').html('<table id="tblTest"><tr><th>Firstname</th><th>Lastname</th></tr><tr class="Highlight"><td>Peter</td><td>Griffin</td></tr><tr class="Highlight"><td>Lois</td><td>Griffin</td></tr></table>');

        $('#btnExpCol').click(function () {
            if ($(this).val() == 'Collapse') {
                $('#divTest').stop().slideUp('3000');
                $(this).val('Expand');
            } else {
                $('#divTest').stop().slideDown('3000');
                $(this).val('Collapse');
            }
        });

        //$('#tblTest').find('.Highlight').live('click', function () {
        //    $(this).toggleClass('Red');
        //});

        $('#tblTest').find('.Highlight').click(function () {
            $(this).toggleClass('Red');
        });

        $('#tblTest').find('.Highlight').live({
            mouseenter: function () {
                $(this).addClass('Blue');
            },
            mouseleave: function () {
                $(this).removeClass('Blue');
            }
        });
    });