<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>index方法获取Jquery对象的数组下标</title>
<style type=
"text/css"
>
#main{
width:600px;
border:1px solid green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px solid red;
border-left:1px solid red;
margin:auto;
}
#tbl td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px solid red;
border-right:1px solid red;
}
</style>
<script src=
"jquery-1.6.2.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
var
oldColor;
$(
function
() {
$(
"#tbl tr"
).hover(
function
() {
oldColor = $(this).css(
"backgroundColor"
);
$(this).css(
"backgroundColor"
,
"yellow"
);
},
function
() {
$(this).css(
"backgroundColor"
, oldColor);
});
$(
"#tbl tr"
).click(
function
() {
alert($(
"#tbl tr"
).index($(this)));
});
});
</script>
</head>
<body>
<div id=
"main"
>
<table id=
"tbl"
>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td
class
=
"tdClass"
>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td
class
=
"tdClass"
>4</td>
</tr>
<tr>
<td>5</td><td>5</td><td>5</td>
</tr>
<tr>
<td>6</td><td>6</td><td
class
=
"tdClass"
>6</td>
</tr>
</table>
</div>
</body>
</html>