Javascript 如何更改颜色点击按钮？

我想在单击“编辑”按钮时更改背景色。它可以工作，但当我第一次单击“编辑”按钮时，第一行高亮显示。第二次单击另一个编辑按钮时，第二行高亮显示。我想在单击任何编辑按钮时，只高亮显示这一行。那我怎么做呢

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

我把我的结构附在图片上。

试试这个：

$('.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");
});

工作示例：

在css创建类中

.yellowBg {
    background-color: yellow;
}

编辑js

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

使用此代码：

$(document).ready(function(){

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

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

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

    })

})

最终代码：

这是测试 .亮点{ 背景颜色：黄色； } 1标签编辑 2AzadiEdit 3KazemiEdit $document.readyfunction{ $.edit\u btn.onclick，函数{ $td.removeClasshighlight； $this.closesttr.find.field_name.addClasshighlight； } }

---

你能提供小提琴吗？这样我们可以帮助你，你可以有一个数组，并将选定的行放入其中。或者你可以像angular中那样研究双向数据绑定。如果没有看到你的标记，我们该如何帮助？@user318941，检查我的答案！非常感谢@ehsan:：@user318941我更新了代码。请使用新代码重试。

$(document).ready(function(){

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

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

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

    })

})