Question

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

允许折叠/展开
突出显示所选行
Moues悬停变更

建造桌子的最佳方法是什么？（意味着它对用户来说看起来不错）

我需要在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

Answer 2

    <input type="button" id="btnExpCol" value="Collapse" />
    <div id="divTest">
        <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>
    </div>

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

   $(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');
            }
        });
    });

Demo

在html5中构建表

2 个答案: