1

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

  1. 允许折叠/展开

  2. 突出显示选定的行

  3. 鼠标悬停变化

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

我需要在 jquery 中使用吗？

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

4

2 回答 2

2

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

要使您的行展开和折叠，您需要设置表格，以便每行下方都有一行，可以通过单击其上方的行来切换（隐藏/显示） 。

快速搜索了一个小 jquery 插件，它已经完成了这项工作。即使你不使用它，它也可以作为一个很好的例子。

单元格突出显示可以在 jQuery 中完成。只需让它在单击单元格时添加一个具有您想要的 CSS 属性的类。

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

鼠标悬停事件也可以在 jQuery 中完成。与上面的代码非常相似。

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

为了更好地演示，这是我制作的一个小 jsfiddle

于 2012-06-07T14:39:41.563 回答
0 
    <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');
            }
        });
    });

演示

于 2012-06-07T15:20:00.347 回答