javascript - JQuery 数据表文本框列悬停

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