我有以下两张表。我希望使用 jquery 将每个 colgroups 用鼠标悬停来突出显示。
<div id="one">
<table border=1>
<colgroup><colgroup><colgroup><colgroup>
<thead>
<tr>
<th>A</th>
<th>B</td>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div id="two">
<table border=1>
<colgroup><colgroup><colgroup><colgroup><colgroup><colgroup>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
</thead>
<tbdoy>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
这是jQuery:
$("table").delegate('td, th','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
jquery 适用于第一个表,但是当我转到第二个表的第一个列时,第一个表中的第一个列突出显示。表 2 的第 1-4 列都突出显示了表 1 的第 1-4 列。当我在第二个表中执行第五列时,第二个表中的第一列突出显示。第六列使第二列突出显示。
为什么一切都是这样抵消的?