Question

我是JQuery和数据表的新手，我有一个关于在Jquery UI数据表列中使用文本框的问题。我有一个包含文本框的列。当我将鼠标悬停在一行上时，我希望我的文本框背景和边框发生变化。我已经添加了使用JQuery添加/删除css类的逻辑，但它似乎不适用于数据表。

$('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');
    });
});

在这种情况下，你不应该在＆＃39;中设置它，因为它会移交你所在的范围，类或对象。

JQuery Datatable文本框列悬停

2 个答案: