0

JQuery を使用してテーブルの行を強調表示しようとしていますが、機能していません。その理由と修正方法を教えてもらえますか?

テーブル：

<table id="customers">
    <caption>Customers</caption>
    <thead>
        <tr>
            <th>Customer no</th>
            <th>Last name</th>
            <th>First name</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr class="alt">
            <td>1</td>
            <td>Jackson</td>
            <td>Simon</td>
            <td>
                <div class="align-left">
                    <input type="submit" name="View" id="view" value="View" />
                </div>
                <div class="align-right">
                    <input type="submit" name="Rent" id="rent" value="Wants to rent" />
                </div>
            </td>
        </tr>
        <tr class="alt">
            <td>1</td>
            <td>Miller</td>
            <td>Darren</td>
            <td>
                <div class="align-left">
                    <input type="submit" name="View" id="view" value="View" />
                </div>
                <div class="align-right">
                    <input type="submit" name="Rent" id="rent" value="Wants to rent" />
                </div>
            </td>
        </tr>
    </tbody>
</table>

JQuery:

    $("#customers tbody tr").hover(

    function () {
        $(this).css({
            background: 'yellow'
        });
    },

    function () {
        $(this).css("background", "");
    });

何が起こるかは、テーブルの行にカーソルを合わせても強調表示されないことです。また、セレクターを調整すると td で機能することに注意してください。tr 行では機能しません。

CSS:

    ...
    /* table data style */

    table {

        border-collapse: collapse;    
        width: 400px;
        color: grey;
        font-family: sans-serif;

    }

    th, td {

        border-bottom: 1px solid brown;
        padding: 5px;
        background-color: seashell;
        text-align: left;    

    }

    th {

        width: 200px;

    }

    td {

        width: 200px;

    }

    tr.alt td, tr.alt th {

        background-color: white;

    }

    tr:last-child td, tr:last-child th {

        border-bottom: 0;

    }

    caption {

        font-weight: bold;
        padding-bottom: 5px;

    }

    .main-font {

        font-family: sans-serif;

    }
4

3 に答える 3

3

sbeliv01 の正解に加えて、Javascript は必要なく、純粋な CSS で実現可能であり、この種の用途に使用することを強くお勧めします。

#customers tbody tr:hover
{
  background: yellow;
}

OPが完全なCSSコードを投稿した後の編集：はい、要素に適用background-colorしているため、CSSはホバー効果を「ブロック」しています。tdしたがって、tr背景色は正しく変更されyellowていますtdが、まだseashell/であるため表示できませんwhite。

問題を解決するには、背景色をtrではなく CSS の に適用しますtd。

table {

    border-collapse: collapse;
    width: 400px;
    color: grey;
    font-family: sans-serif;

}

th, td {
    /* Remove background-color here */
    border-bottom: 1px solid brown;
    padding: 5px;
    text-align: left;

}

/* Add this declaration (with the color previously applied to "th, td") */
tr
{
    background-color: seashell;
}

th {

    width: 200px;

}

td {

    width: 200px;

}

/* Change your selector from "tr.alt td, tr.alt th" to this */
tr.alt {

    background-color: white;

}

tr:last-child td, tr:last-child th {

    border-bottom: 0;

}

caption {

    font-weight: bold;
    padding-bottom: 5px;

}

.main-font {

    font-family: sans-serif;

}
于 2013-02-06T21:46:08.820 に答える
1

それがあなたが使用している正確なコードである場合});、エラーをスローする jQuery の最後に余分なものがあります。以下のコードと交換すると、正常に動作するはずです。

$("#customers tbody tr").hover(
    function ()
    {
        $(this).css({background: 'yellow'});
    },

    function ()
    {
        $(this).css("background", "");
    }
);
于 2013-02-06T21:42:23.377 に答える
0

あなたはこれを試すことができます 

$('#customers tbody tr').mouseenter(function(){
    $(this).css({ background: 'yellow' });
}).mouseleave(function(){
    $(this).css({ background: '' });
});
于 2013-02-06T21:49:12.270 に答える