1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Detecting table row index with JavaScript</title>
<style type="text/css">
body { width: 500px; text-align: center; font: bold 10px/16px Verdana, sans-serif; color: #555; margin: 20px auto; }
h1, p { text-align: left; font-weight: normal; }
h1 { font: bold 14px "Trebuchet MS", sans-serif; color: #600; }
table { width: 500px; margin: 0 auto; font-size: 10px; border: 1px solid #ccc; border-width: 1px 0 0 1px; border-collapse: collapse; }
caption { margin: 0 auto; font-size: 12px; margin-bottom: 2em; }
td { padding: 10px; border: 1px solid #ccc; border-width: 0 1px 1px 0; }
tr:hover td { background: #CAEFFD; color: #0768B3; cursor: pointer; }
</style>
<script type="text/javascript">
onload = function() {
if (!document.getElementsByTagName || !document.createTextNode) return;
var rows = document.getElementById('table1').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
alert(this.rowIndex + 1);
}
}
}
</script>
</head>
<body>
<table id="table1">
<tbody>
<tr><td>first row</td><td>first row</td><td>first row</td><td>first row</td></tr>
<tr><td>second row</td><td>second row</td><td>second row</td><td>second row</td></tr>
<tr><td>third row</td><td>third row</td><td>third row</td><td>third row</td></tr>
<tr><td>fourth row</td><td>fourth row</td><td>fourth row</td><td>fourth row</td></tr>
</tbody>
</table>
<br /><br />
<body>
</html> |
Partager