表格隔列变色
作者：互联网
<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>
标签：function,index,表格,隔列,var,111,变色,td,trs 来源： https://blog.csdn.net/weixin_43285360/article/details/116425012