如何更改顏色點擊按鈕？

-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

如何更改顏色點擊按鈕？

回答

相關問題