Question

我的网络应用程序中有一个表格，我已经实现了一个事件处理程序，允许用户通过单击表格中的一行来选择数据元素。要在视觉上突出显示所选元素，我给它一个边框。选择新行后，我从旧元素中删除选定的类（边框）并将其添加到新元素中。

我的事件监听器代码似乎正常工作。我已经使用chrome的开发人员工具进行了验证，该类正在从旧元素中删除并添加到新选择的元素中。但是，在调用removeClass（）之后，浏览器无法正确删除边框。

在chrome（18.0.1025.151）中测试时，新选择的元素显示带边框，之前选择的元素仍然显示边框的一部分（边框的底部和右部仍然被绘制）。当我在FF 11中测试时会出现类似的绘图错误。在firefox中，新选择的行仅绘制顶部不显示的边框的左/右/底部分。导致重绘的事件（例如调整浏览器窗口大小）可以修复边框绘制问题。

是否有人有问题原因的信息/链接。更重要的是，在用户选择新行后，我可以实施一种解决方法吗？

添加/删除CSS类

.uiSelectedLHPlanRow { border: 1px solid purple; }

HTML

<table id='lhPlansTable' class='uiLHPlansTable'>
</table>

（动态添加表行）TR格式：

'<tr id=\'' + GENERATED ID + '\' class=\'uiLHPlanTableRow\'><td class=\'uiLHPlanDriverTableCell\'>' + GENERATED DATA1  + '</td><td>' + GENERATED DATA2 + '</td></tr>'

EVENT HANDLER

$('#lhPlansTable').on('click', 'tr.uiLHPlanTableRow', function () {

    ... flow control ...

    $('.uiSelectedLHPlanRow').removeClass('uiSelectedLHPlanRow');
    $(this).addClass('uiSelectedLHPlanRow');


    // TODO: WORKAROUND FOR DRAWING BUG ??
}

Answer 1

border-collapse;看起来像是一个问题。如果您明确设置border-collapse:separate;它似乎工作得更好（尽管您可能需要调整样式）。设置为border-collapse:collapse;会导致问题返回。

示例：http://jsfiddle.net/T2saA/3/

CSS

tr.uiSelectedLHPlanRow > td { 
    border-top: 1px solid purple; 
    border-bottom: 1px solid purple; 
}

table.uiLHPlansTable{
    border-collapse:separate;
}

使用JQuery RemoveClass时浏览器重绘错误的解决方法

1 个答案: