JavaScript Tutorial/jQuery/Selector table
Содержание
Finds all table row containing "F"
<source lang="javascript">
<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>
| First |
| Middle |
| Last |
</body>
</html></source>
Finds all tds with children, including text.
<source lang="javascript">
<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>
| Value 1 | |
| Value 2 |
</body>
</html></source>
Finds even table rows
<source lang="javascript">
<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>
| TD #0 | TD #1 | TD #2 |
| TD #3 | TD #4 | TD #5 |
| TD #6 | TD #7 | TD #8 |
</body>
</html></source>
Finds TD #1 and higher
<source lang="javascript">
<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>
| TD #0 | TD #1 | TD #2 |
| TD #3 | TD #4 | TD #5 |
| TD #6 | TD #7 | TD #8 |
</body>
</html></source>
Finds TDs less than the one with the second index
<source lang="javascript">
<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>
| First |
| Middle |
| Last |
</body>
</html></source>
Finds the last table row.
<source lang="javascript">
<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>
| First |
| Middle |
| Last |
</body>
</html></source>
