JavaScript Tutorial/jQuery/Selector table
Содержание
Finds all table row containing "F"
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:contains("F")").css("background-color", "#bbbbff");
});
</script>
</head>
<body>
<body>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
Finds all tds with children, including text.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:parent").fadeTo(1500, 0.3);
});
</script>
</head>
<body>
<body>
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
</body>
</html>
Finds even table rows
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").css("background-color", "red");
});
</script>
</head>
<body>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Finds TD #1 and higher
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:gt(1)").css("background-color", "red");
});
</script>
</head>
<body>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Finds TDs less than the one with the second index
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:lt(2)").css("color", "red");
});
</script>
</head>
<body>
<body>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
Finds the last table row.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:last").css({backgroundColor: "yellow", fontWeight: "bolder"});
});
</script>
</head>
<body>
<body>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>