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

Question

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

我已经尝试实施一个 jquery 脚本，如果该单元格的值等于是，该脚本将更改该单元格的颜色。我尝试在 displayfor 中实现 class，但它似乎没有什么不同。下面是我有问题的代码部分。

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

首先，您使用 # 字符而不是 class 的 . 字符。此外，它不是 val()，它是 text() for non-input elements。 td里面有没有html？

您不能将 class 分配给任何 w/o 它是 element。在那里扔一个 span 。此外，您正在通过 <tr> 而不是 <td> 来分配背景色。

还需要对 mouseout 进行另一次检查，检查文本是否为 Yes 而 class 是否为 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>

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

change background of table cell depending on value

html

css

model-view-controller

jquery