JavaScriptで表のスタイルを変更する方法-フロントエンドQ&A-php.cn

JavaScriptで表のスタイルを変更する方法

王林

リリース： 2023-05-21 09:37:07

オリジナル

1475 人が閲覧しました

JavaScript は、Web ページに対話性と動的な効果を追加するために使用されるスクリプト言語です。 Web 開発では、テーブルはよく使用される要素の 1 つです。 JavaScript を使用すると、表のスタイルを簡単に変更して、より美しく、読みやすくすることができます。

1. テーブルにスタイルを追加する

テーブルスタイルの変更を開始する前に、テーブルにスタイルを追加する必要があります。 CSS を使用してテーブルのスタイルを定義し、JavaScript を使用してそれらのスタイルを変更します。次の例は、テーブルにスタイルを追加する方法を示しています。

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                text-align: left;
                padding: 8px;
                border-bottom: 1px solid #ddd;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2;
            }
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </table>

    </body>
</html>

ログイン後にコピー

上の例では、次のスタイルを定義しました。

border-collapse: Collapse; はセルの境界線を結合することを意味します。
width: 100%; テーブルが親コンテナの幅の 100% を占めることを示します。
th, td テーブルヘッダーとテーブルデータのスタイルを示します
text-align: left; データが左揃えであることを示します。
padding: 8px; は、データと境界線の間の距離が 8 ピクセルであることを意味します。
border-bottom: 1px Solid #ddd; データの各行の下部の境界線の太さが 1 ピクセルで、色がライトグレーであることを示します。
tr:nth-child(even) は、1 行おきに背景色を変更することを意味します。

2. JavaScript を使用してテーブルスタイルを変更する

テーブルのスタイルを定義したので、次のステップは JavaScript を使用してこれらのスタイルを変更することです。 JavaScript を使用してテーブルスタイルを変更する方法を示す例をいくつか示します。

テーブルの背景色を変更する:

document.getElementsByTagName("table")[0].style.backgroundColor = "#f9f9f9";

ログイン後にコピー

この例では、テーブルの背景色を次のように変更します。ライトグレー。

ヘッダーの背景色を変更する:

var th = document.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
    th[i].style.backgroundColor = "#ddd";
}

ログイン後にコピー

この例では、ヘッダーの背景色を明るい灰色に変更します。

テーブル内のすべてのセルのフォントサイズを変更します:

var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i++) {
    td[i].style.fontSize = "16px";
}

ログイン後にコピー

この例では、テーブル内のすべてのセルのフォントサイズを 16 ピクセルに変更します。

テーブル内のすべての偶数行のフォントの色を変更します:

var tr = document.getElementsByTagName("tr");
for (var i = 1; i < tr.length; i += 2) {
    var td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
        td[j].style.color = "#999";
    }
}

ログイン後にコピー

この例では、テーブル内のすべての偶数行のフォントの色を明るい色に変更します。グレー。

表の最初の列のセルの境界線のスタイルを変更します:

var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i += 3) {
    td[i].style.borderRight = "1px solid #ddd";
}

ログイン後にコピー

この使用例は、表の最初の列のセルの右の境界線を変更します。 1 ピクセル明るい灰色の境界線。

テーブルの最後の列を非表示にする:

var table = document.getElementsByTagName("table")[0];
var td = table.getElementsByTagName("td");
for (var i = td.length - 1; i >= 0; i--) {
    if ((i + 1) % 3 === 0) {
        td[i].parentNode.removeChild(td[i]);
    }
}

ログイン後にコピー

この例では、テーブルのセルの最後の列を削除します。

概要

この記事では、JavaScript を使用してテーブルスタイルを変更する方法を学びました。これらのテクニックを使用すると、美しくされたテーブルを簡単に作成および変更できます。ニーズに応じて、JavaScript を使用してテーブルに動的な効果や対話性を追加できます。表のスタイルを変更する方法を学習したので、JavaScript を使用して表を美しくしてみましょう。

以上がJavaScriptで表のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。