изменить фон ячейки таблицы в зависимости от значения

Question

У меня небольшая проблема, немного отличная от обычных вопросов изменения цвета фона. Mine ссылается на @ html.displayfor вместо обычного значения в элементе td.

Я попытался реализовать сценарий jquery, который изменит цвет ячейки High Priority, если значение этой ячейки равно Yes. Я попробовал реализовать класс в displayfor, но он, похоже, не имеет значения. Ниже приведен мой раздел кода.

table.js

window.onload = function() { 
    $("#tfhover").hide().fadeIn(1500); 
    var tfrow = document.getElementById('tfhover').rows.length; 
    var tbRow = []; 
    for (var i = 1; i < tfrow; i++) { 
     tbRow[i] = document.getElementById('tfhover').rows[i]; 
     tbRow[i].onmouseover = function() { 
      this.style.backgroundColor = '#ffffff'; 
     }; 
     tbRow[i].onmouseout = function() { 
      this.style.backgroundColor = '#d4e3e5'; 
     }; 

      if ($('#high').val() == 'Yes') { 
       this.style.backgroundColor = "#000033"; 
      }; 
     }; 
    }; 

index.cshtml

<script type="text/javascript" src="~/Scripts/Table.js"></script> 



<table id="tfhover" class="tftable" border="1"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.JobID) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Order.OrderID) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Location.LocationName) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Order.EstimatedCompletion) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.HighPriority) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.LastUpdated) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Comments) &nbsp&nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Status) &nbsp&nbsp 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
      <td> 
      @Html.DisplayFor(modelItem => item.JobID) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Order.OrderID) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Location.LocationName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Order.EstimatedCompletion) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.HighPriority, new {@class ="high" }) 
     </td> 
      <td> 
      @Html.DisplayFor(modelItem => item.LastUpdated) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Comments) 
     </td> 
      <td> 
      @Html.DisplayFor(modelItem => item.Status) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id=item.JobID }) | 
      @Html.ActionLink("Details", "Details", new { id=item.JobID }) | 
      @Html.ActionLink("Delete", "Delete", new { id=item.JobID }) 
     </td> 
    </tr> 
} 
</table> 

Answer 1

С одной стороны, вы используете # символ вместо . символа для класса. Также это не val() это text() для non-input elements. Есть ли html внутри td?

Вы не можете назначить класс ни к чему, кроме element. Бросьте span туда. Также вы использовали <tr> вместо <td>, чтобы присвоить цвет backgorund.

необходимо также еще один чек на mouseout который проверяется, чтобы увидеть, если текст был Yes и класс был high поэтому не применять другой background color.

JQuery

$(function() { 
    if ($('.high').text() == 'Yes') { 
     $('.high').parent().css('background-color', '#000033'); 
    } 

    $("#tfhover") 
    .hide() 
    .fadeIn(1500) 
    .find('td') 
    .hover(
     function() { 
      $(this).css('background-color', '#fff'); 
     }, 
     function() { 
      if ($(this).children().hasClass('high') && $(this).children().text() == 'Yes') { 
       $(this).css('background-color', '#000033'); 
      } else { 
       $(this).css('background-color', '#d4e3e5'); 
      } 
     } 
    ); 
}); 

HTML

<table id="tfhover" class="tftable" border="1"> 
<tr> 
    <th>JobID</th> 
    <th>OrderID</th> 
    <th>Location</th> 
    <th>EstimatedCompletion</th> 
    <th>HighPriority</th> 
    <th>LastUpdated</th> 
    <th>Comments</th> 
    <th>Status</th> 
    <th></th> 
</tr> 
<tr> 
    <td>JobID</td> 
    <td>OrderID</td> 
    <td>LocationName</td> 
    <td>EstimatedCompletion</td> 
    <td><span class="high">Yes</span></td> 
    <td>LastUpdated</td> 
    <td>Comments</td> 
    <td>Status</td> 
    <td></td> 
</tr> 
</table>