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也不是html。 td内有element吗？

您不能将某个类分配给span的任何内容。在那里扔<tr>。您还要通过<td>而不是mouseout来指定backgorund颜色。

还需要对Yes进行另一次检查，检查文本是否为high且该类为background color，因此它不会应用其他$(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'); } } ); });。

的jQuery

<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>

HTML

{{1}}

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

1 个答案: