根据值更改表格单元格的背景

Question

我有一个小问题，与通常的背景颜色变化问题略有不同。我指的是 @html.displayfor 而不是 td 元素中的通常值。

我尝试实现一个 jquery 脚本，如果该单元格的值等于是，它将更改高优先级单元格的颜色。我尝试在 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。 td里面有html吗？

如果没有element，您不能将类分配给任何东西。在那里扔一个span。此外，您正在通过 <tr> 而不是 <td> 来分配背景颜色。

还需要再次检查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>