3

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

我的事件侦听器代码似乎工作正常。我已经使用 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>'

事件处理程序

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

    ... flow control ...

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


    // TODO: WORKAROUND FOR DRAWING BUG ??
}
4

1 回答 1

2

看起来像一个问题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;
}​
于 2012-04-09T16:42:48.663 回答