根据值更改表列颜色在剃须刀文件中使用 jquery 不起作用
Posted
技术标签:
【中文标题】根据值更改表列颜色在剃须刀文件中使用 jquery 不起作用【英文标题】：Changing table column color based on value not working using jquery in razor file 【发布时间】：2019-11-09 18:00:57 【问题描述】：我阅读并尝试了许多帖子，但得到了这个工作，但不幸的是到目前为止还没有运气。 我有一个 asp.net mvc 项目，我试图根据列的值更改列的颜色。例如：如果值为红色苹果，则将该列 bg 更改为红色。
下面是我的cshtml的样子：
<body onload="changebgcolor()">
@foreach (var item in Model)
<tr>
<td class="fruit">
@Html.DisplayFor(modelItem => item.fruit)
</td>
<td class="vege">
@Html.DisplayFor(modelItem => item.vegetable)
</td>
</tr>
</body>
这是我的脚本：
function changebgcolor()
var table = $('#fruitsandveggies');
$("tr.item").each(function ()
var apple = $(this).find("td.fruit").text();
if (apple == "RedApple")
$('.fruits').css('background', 'red');
if (apple == "GreenApple")
$('.fruits').css('background', 'green');
);
我可以看到它正在返回 apple == RedApple 但它没有将 bg 颜色更改为绿色苹果的红色或绿色。蔬菜领域也是如此。 我不知道如何让它工作。
【问题讨论】：
【参考方案1】：你可以试试这个对我有用。
我为你创建了一个演示。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<table>
<tbody id="tablebody">
@foreach (var item in Model)
<tr>
<td class="fruit">
@Html.DisplayFor(modelItem => item.fruit)
</td>
<td class="vege">
@Html.DisplayFor(modelItem => item.vegetable)
</td>
</tr>
</tbody>
</table>
</body>
</html>
下面的脚本代码
<script>
$(document).ready(function()
$("#tablebody > tr").each(function (index,elem)
var apple = $.trim($(elem).find("td:first").text());
if (apple == "RedApple")
$(elem).find("td:first").css('background', 'red');
else if (apple == "GreenApple")
$(elem).find("td:first").css('background', 'green');
);
);
</script>
【讨论】：
以上是关于根据值更改表列颜色在剃须刀文件中使用 jquery 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET Razor HTML - 根据值更改表格行的背景颜色
jQuery 用于根据下拉列表的更改值在 asp 中继器中设置背景颜色