javascript - html5 でテーブルを作成する

Question

HTML5 でテーブルを作成する必要があります。テーブルの要件は次のとおりです。

1. 折りたたみ/展開を許可

2. 選択した行を強調表示する

3. マウス ホバーの変更

テーブルを構築する最良の方法は何ですか? （ユーザーにとって見栄えがするという意味）

jquery で使用する必要がありますか?

HTML5 のテーブルに何か特別なものはありますか?

Answer 1

Although it's not 100% necessary, I would use jQuery for simplicity and easy cross browser compatibility.

To make your rows expand and collapse, you'll want to set up your table so that each row has a row below it that can be toggled (hidden/shown) by clicking the row above it.

A quick search brought up a little jquery plugin that has done this already. Even if you don't use it, it might serve as a good example.

Cell highlighting can be done in jQuery. Just make it so that when a cell is clicked it adds a class to it that has the CSS properties you desire.

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

Mouseover events can be done in jQuery too. Very similar to the code above.

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

To better demonstrate, 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');
            }
        });
    });

デモ