Question

我这样做是为了在经典表格上应用一些样式（经典表格= tr，其中仅 th或td。

$('table').css({
        'border-collapse': 'collapse',
        'margin': 'auto'
    })
    .attr({ 'cellpadding': '5px' })
    .find('tr')
    .css({
        'border-left': '1px solid black',
        'border-right':'1px solid black'
    })
    .find('th')
    .parent()
    .css({
        'border':'1px solid rgb(50,170,180)',
        'border-left': '10px solid rgb(0,120,130)',
        'border-right':'10px solid rgb(0,120,130)',
        'font-size': '2em'
    });

唯一的问题是此代码处于“refresh()”函数中。因此，当它被调用时，如果表格中没有任何变化，那么仍然存在“闪烁”，因为它首先应用的样式是所有“tr”然后，仅在之后，修改它tr包含th（通过parent()）以显示“更大”的内容。

换句话说：包含tr单元格的th具有更大的显示效果。我希望它不要闪烁。

你会怎么做？

Answer 1

你应该为这些样式使用CSS，然后jQuery .addClass在需要时动态地将它们应用于元素。

Answer 2

我提出的解决方案是：

    /* select tr that contain only th and not td */
    el.find("tr:has(th):not(:has(td))").css({
        'border':'1px solid rgb(50,170,180)',
        'border-left': '10px solid rgb(0,120,130)',
        'border-right':'10px solid rgb(0,120,130)',
        'font-size': '2em'
    });
    /* select tr that contain only td and not th */
    el.find("tr:has(td):not(:has(th))").css({
        'font-size': '1.4em'
    });

jQuery CSS如何避免闪烁？

2 个答案: