jQuery datatable突出显示MVC应用程序中的行选择问题_Jquery_Asp.net Mvc_Datatable

jQuery datatable突出显示MVC应用程序中的行选择问题

jquery asp.net-mvc

jQuery datatable突出显示MVC应用程序中的行选择问题,jquery,asp.net-mvc,datatable,Jquery,Asp.net Mvc,Datatable,我使用jQueryDataTable在MVC应用程序中显示我的表（客户端）。我使用下面的示例突出显示所选行脚本基本上是根据单击从行中添加或删除行\u选择的类。脚本已执行，但行未高亮显示是否需要手动创建选定的css行如果否，那么该类在哪里定义？或者我做错了什么？最好的解决方案是什么如果是的话，你能举个例子吗提前谢谢 _Layout.cshtml：- <head> <meta charset="utf-8" /> <title>@V

我使用jQueryDataTable在MVC应用程序中显示我的表（客户端）。我使用下面的示例突出显示所选行

脚本基本上是根据单击从行中添加或删除

行\u选择的类。脚本已执行，但行未高亮显示

是否需要手动创建选定的css行
如果否，那么该类在哪里定义？或者我做错了什么？最好的解决方案是什么
如果是的话，你能举个例子吗

提前谢谢
_Layout.cshtml：-
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    @Content.Css("DataTables-1.9.4/media/css/demo_page.css", Url)
    @Content.Css("DataTables-1.9.4/media/css/demo_table.css", Url)
    @Content.Css("DataTables-1.9.4/media/css/demo_table_jui.css", Url)
    @Content.Css("themes/base/jquery.ui.all.css", Url)

    @Content.Css("Site.css", Url)
    @Content.Script("jquery-1.5.1.min.js", Url)
    @Content.Script("jquery-ui-1.8.11.min.js", Url)
    @Content.Script("DataTables-1.9.4/media/js/jquery.dataTables.min.js", Url)
    @Content.Script("modernizr-1.7.min.js", Url)
    @Content.Script("jquery.unobtrusive-ajax.min.js", Url)
</head>


@视图包。标题
@Css（“DataTables-1.9.4/media/Css/demo_page.Css”，Url）
@Content.Css（“DataTables-1.9.4/media/Css/demo_table.Css”，Url）
@Css（“DataTables-1.9.4/media/Css/demo_table_jui.Css”，Url）
@Css（“themes/base/jquery.ui.all.Css”，Url）
@Content.Css（“Site.Css”，Url）
@Content.Script（“jquery-1.5.1.min.js”，Url）
@Content.Script（“jquery-ui-1.8.11.min.js”，Url）
@脚本（“DataTables-1.9.4/media/js/jquery.DataTables.min.js”，Url）
@Content.Script（“modernizer-1.7.min.js”，Url）
@脚本（“jquery.unobtrusiveajax.min.js”，Url）

Index.cshtml:-在定义表的位置呈现局部视图
@model IEnumerable<User>

<div>
    @Html.Partial("_List", Model)
<div>

@model IEnumerable
@Html.Partial（“_列表”，模型）

_列表。cshtml：-
@model IEnumerable<User>

<div>  
<table id="jquery-datatable">
    <thead>
        <tr>
            <th>***</th>
            <th>***</th>
            <th>***</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>***</td>
            <td>***</td>
            <td>***</td>
        </tr>
        }
    </tbody>
</table>
</div>

<script type="text/javascript">
    var oTable;

    $(document).ready(function () {

        $('#jquery-datatable tbody tr').click(function (e) {
            alert ("Start...);
            if ($(this).hasClass('row_selected')) {
                $(this).removeClass('row_selected');
            }
            else {
                oTable.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
            }
            alert ("Finish...);
        });

        oTable = $('#jquery-datatable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "sScrollY": 200,
            "sScrollX": "100%",
            "bScrollCollapse": true
        });
    });
</script>

@model IEnumerable
***
***
***
@foreach（模型中的var项目）
{
***
***
***
}
可变的；
$（文档）.ready（函数（）{
$（'#jquery datatable tbody tr'）。单击（函数（e）{
警报（“启动…”；
if（$（this）.hasClass（'row_selected'））{
$（this.removeClass（'row_selected'）；
}
否则{
可旋转。$（'tr.row_selected'）。removeClass（'row_selected'）；
$（this.addClass（'row_selected'）；
}
警报（“完成…”；
});
oTable=$（'#jquery datatable'）。datatable({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“sScrollY”：200，
“sScrollX”：“100%”，
“崩溃”：真
});
});
求解：-
=>jquery datatable中未定义所选类的行。所以，我需要自己定义css。
=>在发布这个问题之前，我已经创建了一个带有行_的CSS，但它没有突出显示行。
错误的CSS-
.第(1)行已选定{
背景色：#5c87b2；
}
我用下面的CSS替换，效果很好。
正确的CSS-
.第(1)行已选定{
颜色：白色；
}
.row_选定的td{
背景色：#5c87b2；
}
我解决了我的问题，但任何人都有一个想法，为什么背景颜色属性不能与以前的CSS一起工作？？我正在使用HTML5。

Solve:-

=> the row_selected class is not been defined in jquery datatable. So, I need to define css by myself.

=> I have created a CSS with row_selected class before post this question but it did not highlighted row.


Wrong CSS - 

.row_selected {
    background-color:#5c87b2;
}

I replaced with below CSS and working fine.


Correct CSS - 

.row_selected {
    color:white;
}

.row_selected td {
    background-color:#5c87b2;
}

I solved my issue, but any one has an idea, why background-color attribute did not work with previous CSS for <tr></tr> ?? I am using HTML5.