如何更改颜色点击按钮?
问题描述:
我想改变背景颜色,当我点击编辑按钮。它的工作,但当我第一次点击编辑按钮,然后第一行突出显示。第二次我点击花药编辑按钮,然后第二行突出显示。我想单击时,我点击在任何编辑按钮上只有这一行突出显示。那我该怎么做呢?如何更改颜色点击按钮?
$('.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>
答
试试这个:
$('.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");
});
+0
无法正常工作:( – user318941
+0
@ user318941我更新了代码,请用新代码再试一次 –
答
在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");
})
})
最终代码:
<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>
u能请提供的小提琴,以便我们能够帮助您 –
你可以有一个数组和推将选定的行放入其中。或者你可以看看两种方式的数据绑定,例如角度。 –
我们应该如何在看不到您的标记的情况下提供帮助? – Tom