我有一个数据表有8列，其中一列是隐藏的。我想将“Durum”列值为“Aktif”的行的背景颜色更改为绿色，将列值“Pasif”更改为红色。我使用了“fnRowCallback”和“createdRow”功能，但我无法改变颜色。我在下面添加了我的代码。我在哪里做错了？请帮帮我..
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdminLogin.aspx.cs" Inherits="RaporProject.AdminLogin" EnableEventValidation="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AdminLogin</title>
<!-- jQuery -->
<script src="scripts/jquery-1.12.4.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery.dataTables.min.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script src="scripts/jquery-ui-1.12.1.min.js"></script>
<!-- JavaScript -->
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/dataTables.bootstrap.min.js"></script>
<script src="scripts/dataTables.select.min.js"></script>
<!-- Bootstrap -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<link href="Content/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="Content/select.dataTables.min.css" rel="stylesheet" />
<link href="Content/style.min.css" rel="stylesheet" />
<link href="Content/jquery-ui.css" rel="stylesheet" />
<link href="Content/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
var table = $('#UserList').DataTable({
"aLengthMenu": [[4, 8, 12, -1], [4, 8, 12, "All"]],
"iDisplayLength": 4,
"bFilter": false,
"aaSorting": [[2, "desc"]],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[5] == "Aktif") {
$('td', nRow).css('background-color', 'Green');
}
else if (aData[5] == "Pasif") {
$('td', nRow).css('background-color', 'Red');
}
},
select: {
style: 'single'
},
language: {
url: '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json'
}
});
});
$(document).ready(function () {
$('#UserList tbody').on('click', 'tr', function () {
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
// alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$('#Hidden1').val(tableData);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="Hidden1" runat="server" />
<div class="container">
<div class="jumbotron">
<h5>Merhaba <asp:LinkButton ID="lblKullaniciAdi" ForeColor="Red" runat="server" OnClick="lblKullaniciAdi_Click">LinkButton</asp:LinkButton> </h5>
<h5><asp:LinkButton ID="btnLogOut" runat="server" ForeColor="Red" CssClass="pull-right" OnClick="btnLogOut_Click" Font-Underline="True">Log Out</asp:LinkButton> </h5>
<h2>Kullanıcılar</h2>
</div>
<div style="float:right">
<asp:Button ID="btn_KullaniciEkle" class="btn btn-primary" runat="server" Text="Yeni Kullanıcı Ekle" OnClick="btn_KullaniciEkle_Click"/>
</div>
<h1>Kullanıcı Listesi</h1>
<asp:Repeater ID="rptUsers" runat="server">
<HeaderTemplate>
<table class="table table-striped table-bordered table-hover" id="UserList">
<thead>
<tr>
<th class="hidden">ID</th>
<th style="text-align:center">Kullanıcı Adı</th>
<th style="text-align:center">Ad</th>
<th style="text-align:center">Soyad</th>
<th style="text-align:center">IsAdmin</th>
<th style="text-align:center">Durum</th>
<th style="text-align:center">Rapor Göster</th>
<th style="text-align:center">Sil</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="hidden">
<asp:Label ID="lblSira" runat="server" Text='<%# Eval("ID") %>' />
</td>
<td style="pointer-events:none;text-align:center">
<asp:Label ID="lblKullaniciAdi" runat="server" Text='<%# Eval("KullaniciAdi") %>' />
</td>
<td style="pointer-events:none;text-align:center">
<asp:Label ID="lblAd" runat="server" Text='<%# Eval("Ad") %>' />
</td>
<td style="pointer-events:none;text-align:center">
<asp:Label ID="lblSoyad" runat="server" Text='<%# Eval("Soyad") %>' />
</td>
<td style="pointer-events:none;text-align:center">
<asp:Label ID="lblAdmin" runat="server" Text='<%# Eval("IsAdmin") %>' />
</td>
<td style="pointer-events:none;text-align:center">
<asp:Label ID="lblDurum" runat="server" Text='<%# Eval("Durum") %>' />
</td>
<td>
<asp:Button ID="btn_Show" class="btn btn-primary center-block" OnClick="btn_Show_Click" runat="server" Text="Göster"/>
</td>
<td>
<asp:Button ID="btn_Delete" class="btn btn-danger center-block" OnClick="btn_Delete_Click" runat="server" Text="Sil" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
答案 0 :(得分：1)
尝试添加此功能
<style type="text/css">
.clrGreen{
background-color:green;
}
.clrRed{
background-color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#UserList > tbody > tr').each(function () {
debugger;
var durumValue = $(this).find(".lblDurum").html();
switch (durumValue) {
case "Aktif":
$(this).addClass("clrGreen");
break;
case "Pasif":
$(this).addClass("clrRed");
break;
};
});
})
</script>
她工作正常fiddle
答案 1 :(得分：1)
您问题的最简单解决方案，无需jquery / javascript
.Aktif{ background-color: green;}
.Pasif{ background-color: red;}
并添加样式
os.system("foo.py -parameters")答案 2 :(得分：0)
然后你可以试试createdCell
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData == "Aktif" ) {
$(row).css('background-color', 'Green');
}
else if (cellData == "Pasif") {
$(row).css('background-color', 'Red');
}
答案 3 :(得分：0)
更改fnRowCallback功能，如下所示：
"rowCallback": function( row, data, index ) {
$node = this.api().row(row).nodes().to$();
if (data[5] == "Aktif") {
$node.addClass('green')
}
}
<强> CSS：
.green{
background-color: green!important;
}