我想在一个table里的全部td加上鼠标悬停事件.
如果悬停到该td,那么该 td的 行 和列 的背景色全部变成绿色..
------解决方案--------------------
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#table1 td").hover(function(e) {
$(this).parent().toggleClass("active")
$("tr").find("td:eq("+$(this).index()+")").toggleClass("active")
});
});
</script>
<style type="text/css">
.active {
background-color: #9cc;
}
</style>
</head>
<body>
<table width="400" border="1" align="center" id="table1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#table1 td").hover(function(e) {
$(this).toggleClass("black")
$(this).parent().toggleClass("active")
$("tr").find("td:eq("+$(this).index()+")").toggleClass("active")
});
});
</script>
<style type="text/css">
.active {
background-color: #9cc;
}
.black{
background-color: #000;
}
</style>
补充上面的，颜色可以自己改
------解决方案--------------------
我的写法，有点繁琐，测过可用 sp是带颜色的class
$('table td').hover(function(){
var td_index = $(this).index();
$(this).siblings('td').addClass('sp');
$('table td').each(function(){
if($(this).index() == td_index)
$(this).addClass('sp');
})
},function(){
$('table td').removeClass('sp')
})