jQuery技巧：改變表格行屬性的方法

2024-03-03 10:50:33 前端筆記 137

標題：jQuery技巧：改變表格行屬性的方法

正文：

在網頁開發中，表格是常用的元素之一，而通過jQuery來實現對表格行屬性的改變可以讓頁面更具交互性和動態效果。本文將介紹一些使用jQuery改變表格行屬性的方法，并提供具體的代碼示例。

一、為表格行添加hover效果
要實現當鼠標懸停在表格行上時，該行的背景顏色改變的效果，可以使用以下代碼：

<html>
<head>
    <script src="ajax.googleapis/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        tr:hover {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>內容</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>內容</td>
        </tr>
    </table>
</body>
</html>

二、根據條件改變表格行顏色
有時候我們需要根據某些條件來改變表格行的樣式，比如根據數值的大小來顯示不同的顏色。下面的代碼展示了如何根據數據的大小來改變表格行的背景顏色：

<html>
<head>
    <script src="ajax.googleapis/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("table tr").each(function(){
                var value = parseInt($(this).find("td:last").text());
                if(value > 50){
                    $(this).css("background-color", "green");
                } else {
                    $(this).css("background-color", "red");
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>數據1</td>
            <td>60</td>
        </tr>
        <tr>
            <td>數據2</td>
            <td>40</td>
        </tr>
    </table>
</body>
</html>