Question

我有下面的代码，我希望在加载表时有这个类名。
我试过了$('#currentNewSettingTable').ready，但它没有用。什么是适当的解决方案？
此功能目前在：

$(document).ready(function() {
      $('#currentNewSettingTable').hover(
            function() {
                $(this).find('tr').each( function() {
                    if (!isMatching($(this))) $(this).addClass('newSettingHighlight');               
                });
            }, function() {          
                $(this).find('tr').removeClass('newSettingHighlight'); 
});

由于

Answer 1

好的，我提出以下方案：

页面加载后，我们会突显显示该表一段时间（比如3秒），然后返回默认状态（未突出显示）
然后我们添加一个效果来突出显示每一行。

使用CSS规则可以轻松完成突出显示和悬停效果，我们只需使用JavaScript来应用正确的CSS类来激活/停用效果。

注意：虽然CSS transition可以设置高亮效果（并且方式更好），但为了简单起见，我只添加一个丑陋的红色边框。

所以，我已经在几个CSS类中划分了表的不同状态：

/* DEFAULT STATE */
#my-table {
  width: 100%;
}

#my-table tbody tr {
  background: #e2e2e2;
}

#my-table td {
  padding: 2px;
}

/* HILIGHTED STATE */
.highlighted-table {
  border: 2px solid red;
}

/* ROW HOVER EFFECT */
#my-table.hover-effect-table tbody tr:hover {
  background: pink;
}

在我需要时使用一些javaScript（jQuery）来添加/删除这些类。要添加一些延迟，我使用JavaScript setTimeout函数。

注意：要分解操作，我将它们分成2个函数：

加载页面后，触发highligthTable（1s后）。

HighlightTable等待3秒，然后移除高亮效果并添加悬停。

$(document).ready(function() {
    // After page is loaded, we wait 1s, then add highlight class to the table
    setTimeout(function(){
        highlightTable();
    }, 1000);
});


function highlightTable() {
    $('#my-table').addClass('highlighted-table');

    //The table will be higlithed for 3 seconds, 
    // then it returns to it's default state
    // and we add class that allow hover effect on it's rows
    setTimeout(function(){
        $('#my-table').removeClass('highlighted-table')
                            .addClass('hover-effect-table');
    }, 3000);
}

以下是完整代码：https://jsfiddle.net/kmmxgr8v/

jQuery，在加载表时添加新元素

1 个答案: