<script src="js/jquery-1.12.3.min.js"></script>
<style>
table {
margin-top: 100px;
}
</style>
<table border="1" cellspacing="0" width="600" align="center">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
<script>
// 获得元素
var $trs = $('tr');
var $tds = $('td');
$tds.mouseenter(function() {
//获取当前td的序号
var index = $(this).index();
$trs.each(function() {
// 将对应的每一行的对应的列(单元格)改变其背景颜色
$(this).children().eq(index).css('background-color', 'red');
})
}).mouseleave(function() {
//获取当前td的序号
var index = $(this).index();
// 将对应的每一行的对应的列(单元格)改变其背景颜色
$trs.each(function() {
$(this).children().eq(index).css('background-color', 'transparent');
})
})
</script>