suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erklärung zum Festlegen des Tabellenstils mithilfe von JQuery

Ausführliche Erklärung zum Festlegen des Tabellenstils mithilfe von JQuery

伊谢尔伦
伊谢尔伦Original
2017-07-22 09:07:211873Durchsuche

1: Warum diese Methode schreiben?

Um den Stil schön zu gestalten, hat der Tabellenkopf einen Stil einer für ungeradzahlige Zeilen, ein Stil für gerade nummerierte Zeilen. Die Farbe ändert sich, wenn die Maus darüber bewegt wird, und kehrt zur Farbe zurück, wenn die Maus sie verlässt. So machen Sie es.

2: Implementierungsprozess

JS-Datei xs_table_css.js

$(document).ready(function () {
    var xs_table_css = "xs_table"; //获取table的css
    var xs_table_th_css = "xs_table_th"; //table 的th样式
    var xs_table_even_css = "xs_table_even"; //table的偶数行css
    var xs_table_odd_css = "xs_table_odd"; //table的奇数行css
    var xs_table_select_css = "xs_table_select"; //table选择行的样式
    var xs_table = "table." + xs_table_css;
    $(xs_table).each(function () {
        $(this).children().children().has("th").addClass(xs_table_th_css); //表头
        var tr_even = $(this).children().children(":even").has("td"); //数据偶数行
        var tr_odd = $(this).children().children(":odd").has("td"); //数据奇数行
        tr_even.addClass(xs_table_even_css);
        tr_odd.addClass(xs_table_odd_css);
        tr_even.mouseover(function () {
            $(this).removeClass(xs_table_even_css);
            $(this).addClass(xs_table_select_css);
        });
        tr_even.mouseout(function () {
            $(this).removeClass(xs_table_select_css);
            $(this).addClass(xs_table_even_css);
        });
        tr_odd.mouseover(function () {
            $(this).removeClass(xs_table_odd_css);
            $(this).addClass(xs_table_select_css);
        });
        tr_odd.mouseout(function () {
            $(this).removeClass(xs_table_select_css);
            $(this).addClass(xs_table_odd_css);
        });
    });
});

Stildatei xs_table.css

.xs_table
{
}
.xs_table_th
{
    height: 50px;
    background-color: #C0C0C0;
}
.xs_table_even
{
    height: 50px;
    background-color: #F0F0F0;
}
.xs_table_odd
{
    height: 50px;
    background-color: #FFFFFF;
}
.xs_table_select
{
    height: 50px;
    background-color: #D9D9D9;
}

Auslagerungsdatei xs_table_css.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="xs_table.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
    </script>
    <script src="xs_table_css.js" type="text/javascript"></script>
</head>
<body>
<table class="xs_table" width="800px">
<tbody >
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</tbody>
</table>
<br />
<br />
<table class="xs_table" width="800px">
<tr><th>headone</th><th>headTwo</th></tr>
<tr><td>第一行</td><td>111111111</td></tr>
<tr><td>第二行</td><td>222222222</td></tr>
<tr><td>第三行</td><td>333333333</td></tr>
<tr><td>第四行</td><td>444444444</td></tr>
</table>
</body>
</html>

3: Methodenbeschreibung

(1) Mouseover und Mouseout müssen zuerst das letzte CSS entfernen, sonst kommt es zu einer Stilüberlagerung

(2 ) Achten Sie bei der Suche nach tr auf tbody. Obwohl es auf der Seite kein tbody-Tag gibt, gibt es standardmäßig dieses Unterelement

(3) Entfernen Sie th aus ungeraden und geraden Zeilen und suchen Sie nur nach td

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Festlegen des Tabellenstils mithilfe von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erklärung, wie man Klasseninstanzen in JavaScript durch Funktionen definiertNächster Artikel：Ausführliche Erklärung, wie man Klasseninstanzen in JavaScript durch Funktionen definiert

In Verbindung stehende Artikel

Mehr sehen