使用JQuery修改Table特定行的相关属性

最新推荐文章于 2023-03-02 09:29:47 发布

__HelloWorld__

最新推荐文章于 2023-03-02 09:29:47 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： jquery table

本文链接：https://blog.csdn.net/kangkanglou/article/details/78724546

版权

前端专栏收录该内容

51 篇文章 2 订阅

订阅专栏

一个简单的小问题，有如下一个表格：

<table border="1" id="history">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>June</td>
            <td>$200</td>
        </tr>
        <tr>
            <td>July</td>
            <td>$1000</td>
        </tr>
        <tr>
            <td>October</td>
            <td>$1000</td>
        </tr>
    </table>

找到July所在行，并修改其所在行背景为红色

$(document).ready(function() {
    $("#history").children().find("td").each(function(index, data) {
        if ($.trim($(data)[0].innerText) === "July") {
            $(data).parent().css("background-color", "red");
        }
    });
});

在没有其他可能的干扰因素的前提下，或许你也可以这么做

$("#history").children().find("tr").each(function (index, data) {
    if ($.trim($(data)[0].innerText).indexOf("June")>-1) {
        $(data).css("background-color", "blue");
    }
});