JQuery 数据表文本框列悬停

Question

我是 JQuery 和数据表的新手，我对在 Jquery UI 数据表列中使用文本框有疑问。我有一个包含文本框的列。当我将鼠标悬停在一行上时，我希望我的文本框背景和边框发生变化。我已经使用 JQuery 将逻辑添加到 add/remove css class，但它似乎在数据表中不起作用。

$('tr').each(function () {
    $('this').hover(function () {
        $('#myText').addClass('hover');
    }, function () {
        $('#myText').removeClass('hover');
    });
});

这是JSFiddle

有使用 JQuery 的想法吗？

Answer 1

你不需要 jquery 来做到这一点只需使用 css:

#example tr input:hover{
     background-color: red;
    border: 1px solid gray;
}

fiddle

如果您想要 jquery 解决方案，请使用此

table = $('#example').dataTable({
        "fnCreatedRow": function( nRow, aData, iDataIndex ) {
            $('td:eq(1)', nRow).hover(
                function() {  $(this).find("input").addClass("hover") } ,
                function() { $(this).find("input").removeClass("hover") }
            );
        }
    });

fiddle

这将影响整行

table = $('#example').dataTable({
        "fnCreatedRow": function( nRow, aData, iDataIndex ) {
            $(nRow).hover(
                function() {  $(this).find("input").addClass("hover") } ,
                function() { $(this).find("input").removeClass("hover") }
            );
        }
    });

fiddle

Answer 2

CSS3 是最优雅的解决方案，但如果您真的想用 jquery 来做，请这样做：

$('tr').each(function () {
    $(this).hover(function () {
        $(this).toggleClass('hover');
    });
});

在这种情况下，您不应在 ' 中设置 this，因为它会移交作用域，class 或您所在的对象。

JQuery 数据表文本框列悬停

JQuery Datatable textbox column hover

javascript

c#

jquery

jquery-ui

datatables