Выделите строку при нажатии на кнопку

Question

Я использую следующий скрипт, чтобы выделить строку, когда я нажал кнопку редактирования этой строки. Я передаю Id строки, когда я нажимаю кнопку! Моя проблема заключается в том, что код работает в Mozilla Firefox, но не в Google Chrome. Что не так в следующем коде.

function high(id) 
{ 
    $('tr').removeAttr('style'); 
    document.getElementById(id).style="background-color:#eeeeea;color:#000000;font-weight:500;"; 
} 

Answer 1

Попробуйте это,

$('#'+id).attr("style","background-color:#eeeeea;color:#000000;font-weight:500;"); 

Working на хром также.

Причина, может быть стиль - это объект, который имеет некоторые свойства в нем. и хром не могут перезаписывать его. Таким образом, пользовательская строка, которую вы передали , не будет применяться к ней, поэтому никаких изменений к элементу не будет.

Answer 2

Необходимо установить свойства объекта стиля индивидуально.

var elem = document.getElementById(id); 
//Set properties 
elem.style.color = "#000000"; 
elem.style.fontWeight = "500"; 
elem.style.backgroundColor = "#eeeeea"; 

---

Поскольку вы используете jquery, Вы можете использовать .css()

$('#' + id).css({ 
    "background-color" :"#eeeeea", 
    "color":"#000000", 
    "font-weight":"500"; 
}); 

---

Однако, я бы порекомендовал вам создать класс CSS затем использовать его.

$('tr').removeClass('highlight'); 
$('#' + id).addClass('highlight'); 

Answer 3

Это демо, чтобы добавить специальный класс в строку редактирования и удалить класс в других строках. Это делается с использованием метода jery. Для этого вам даже не нужно использовать какой-либо идентификатор.

$("button").on("click",function(){ 
 
\t \t $("tr").each(function(){ 
 
\t \t \t $(this).removeClass("marked"); 
 
\t \t }); 
 
\t \t $(this).closest("tr").addClass("marked"); 
 
\t });

\t .marked{ 
 
\t \t background-color:#eeeeea;color:#000000;font-weight:500; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
\t <table> 
 
\t \t <tr> 
 
\t \t \t <td>This is TD</td> 
 
\t \t \t <td><button>Edit</button></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>This is TD</td> 
 
\t \t \t <td><button>Edit</button></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>This is TD</td> 
 
\t \t \t <td><button>Edit</button></td> 
 
\t \t </tr> 
 
\t </table>