Как добавить класс CSS динамически в строку таблицы на mouseover

Question

Я пытаюсь выделить строку, пока я на определенной строке. Мне пришлось использовать onmouseover.

Но это не для меня.

Это определение таблицы в cshtml.

       <table class="table"> 
            <thead> 
             <tr> 
              <th class="severityCheck"><input type="checkbox" value="" /></th> 
              <th>Customer Name</th> 
              <th>Site Name</th> 

              <th></th> 
             </tr> 
            </thead> 
            <tbody data-bind="foreach:CustomerList"> 
             <tr onclick="removepage();" onmouseover="changeRowColor(this)"> 

              <td> 
               <input class="checkbox" data-bind="attr: { Id: 'checkbox' + $data.Id },click:$parent.customerClick" type="checkbox"> 

              </td> 
              <td class="col-md-4"> 
               <span class="name" data-bind="text:customerName" /> 

              </td> 
              <td> 
               <span data-bind="text:siteName" /> 
              </td> 

             </tr> 
            </tbody> 
           </table> 

Для выделения при наведении курсора мыши, я написал changeRowColor как:

function changeRowColor(row) { 
    row.addClass = 'active'; 

} 

Но класс не отражается. Но когда я делаю

row.style.backgroundColor= 'red'; 

это происходит.

Что я делаю неправильно?

Кроме того, я должен выделить текущую строку только тогда, когда мышь находится поверх этого и не выделяется, когда мышь уходит.

Как мне это сделать?

Answer 1

почему бы не использовать CSS

table tr:hover td{background-color:red;}