我想在单击编辑按钮时更改背景颜色。它工作但是当我第一次点击编辑按钮然后第一行突出显示。第二次我点击花药编辑按钮然后第二行突出显示。我想当我点击任何编辑按钮,只有这一行突出显示。那我怎么能这样做呢?
$('.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>
答案 0 :(得分:2)
试试这个:
$('.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");
});
答案 1 :(得分:0)
在css中创建类
.yellowBg {
background-color: yellow;
}
编辑js
$('.edit_btn').click(function () {
$('.yellowbg').removeClass('yellowBg');
$(this).closest('tr').find('.field_name').addClass('yellowBg');
});
答案 2 :(得分:0)
使用此代码:
$(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>