Question

我想在单击编辑按钮时更改背景颜色。它工作但是当我第一次点击编辑按钮然后第一行突出显示。第二次我点击花药编辑按钮然后第二行突出显示。我想当我点击任何编辑按钮，只有这一行突出显示。那我怎么能这样做呢？

    $('.edit_btn').click(function () {
        $(this).closest('tr').find('.field_name').prop('contenteditable', true);
        $(this).closest('tr').find('.field_name').css("background-color", "yellow");
    });

我的形象附有我的结构。 enter image description here

<form method="post" action="" name="city_list">
    <table cellspacing="10" cellpadding="10" border="1" style="width:100%" class=""> 
        <tbody>
            <tr>
                <th>Id</th>
                <th>City</th>
                <th>Action</th> 
            </tr>
            <tr class="odd">
                <td class="field_id">1</td>
                <td class="field_name" style="background-color: yellow;">mumbai</td>
                <td><input type="button" value="edit" class="edit_btn" name="edit"></td>
                <td><input type="button" value="save" class="save_btn" name="save_btn"></td>  
            </tr>
            <tr class="even">
                <td class="field_id">2</td>
                <td contenteditable="true" class="field_name" style="background-color: yellow;">pune</td>
                <td><input type="button" value="edit" class="edit_btn" name="edit"></td>
                <td><input type="button" value="save" class="save_btn" name="save_btn"></td>  
            </tr>   
        </tbody>
    </table>
</form>

Answer 1

试试这个：

$('.edit_btn').click(function () {
    //remove other highlighted fields
    $('table').find('.field_name').css('background', 'none')
    //add highlight to this row
    $(this).closest('tr').find('.field_name').css("background", "yellow");
});

工作示例：https://jsfiddle.net/874g7uvz/

Answer 2

在css中创建类

.yellowBg {
    background-color: yellow;
}

编辑js

$('.edit_btn').click(function () {
    $('.yellowbg').removeClass('yellowBg');
    $(this).closest('tr').find('.field_name').addClass('yellowBg');
});

Answer 3

使用此代码：

$(document).ready(function(){

    $(".edit_btn").on("click",function(){

        $("td").removeClass("highlight");

        $(this).closest("tr").find(".field_name").addClass("highlight");

    })

})

最终代码：

<html>
    <title>This is test</title>
    <head>
        <style>
            .highlight {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr><td>1</td><td class="field_name">Taghdisi</td><td><button class="edit_btn">Edit</button></td></tr>
            <tr><td>2</td><td class="field_name">Azadi</td><td><button class="edit_btn">Edit</button></td></tr>
            <tr><td>3</td><td class="field_name">Kazemi</td><td><button class="edit_btn">Edit</button></td></tr>
        </table>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>

        $(document).ready(function(){

            $(".edit_btn").on("click",function(){

                $("td").removeClass("highlight");

                $(this).closest("tr").find(".field_name").addClass("highlight");

            })

        })
        </script>
    </body>
</html>

如何更改颜色点击按钮？

3 个答案: