如何更改颜色点击按钮？

-3

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

$('.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>

来源

2016-08-23 user318941

u能请提供的小提琴，以便我们能够帮助您 –

你可以有一个数组和推将选定的行放入其中。或者你可以看看两种方式的数据绑定，例如角度。 –

我们应该如何在看不到您的标记的情况下提供帮助？ – Tom

试试这个：

$('.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/

来源

2016-08-23 14:02:24

无法正常工作:( – user318941

@ user318941我更新了代码，请用新代码再试一次 –

在CSS创建类

.yellowBg { 
    background-color: yellow; 
}

编辑JS

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

来源

2016-08-23 14:04:15 WaldemarIce

使用此代码：

$(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>

来源

2016-08-23 14:06:52 Ehsan

@ user318941，查看我的答案！ – Ehsan

非常感谢你@ehsan :) :) – user318941

@ user318941，如果帮助你标记它 – Ehsan

如何更改颜色点击按钮？

回答

相关问题