javascript - JQuery Datatable 文本框列悬停

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