JQuery4
DOM Traversal
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal</title>
<style>
.cell {
height: 50px;
width: 100px;
text-align: center;
border:2px dotted gray;
}
.row
{
outline:green solid medium;
}
table
{
border:3px solid blue;
}
*
{
margin:10px;
padding:10px;
}
</style>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("#r1c2").parent().css("outline", "red solid thick");
//$("#row1").parent().css("outline", "red solid thick");
//$("table").parent().css("outline", "red solid thick");
//$("#r1c2").parents().css("outline", "red solid thick");
//$("body").parents().css("outline", "red solid thick");
//$("#r1c2").parentsUntil("body").css("outline", "red solid thick");
});
});
</script>
</head>
<body>
<table id="mytable">
<tr id="row1" class="row">
<td id="r1c1" class="cell">Row1 Cell1</td>
<td id="r1c2" class="cell">Row1 Cell2</td>
<td id="r1c3" class="cell">Row1 Cell3</td>
<td id="r1c4" class="cell">Row1 Cell4</td>
</tr>
<tr id="row2" class="row">
<td id="r2c1" class="cell">Row2 Cell1</td>
<td id="r2c2" class="cell">Row2 Cell2</td>
<td id="r2c3" class="cell">Row2 Cell3</td>
<td id="r2c4" class="cell">Row2 Cell4</td>
</tr>
<tr id="row3" class="row">
<td id="r3c1" class="cell">Row3 Cell1</td>
<td id="r3c2" class="cell">Row3 Cell2</td>
<td id="r3c3" class="cell">Row3 Cell3</td>
<td id="r3c4" class="cell">Row3 Cell4</td>
</tr>
<tr id="row4" class="row">
<td id="r4c1" class="cell">Row4 Cell1</td>
<td id="r4c2" class="cell">Row4 Cell2</td>
<td id="r4c3" class="cell">Row4 Cell3</td>
<td id="r4c4" class="cell">Row4 Cell4</td>
</tr>
</table><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
<html>
<head>
<title>DOM Traversal</title>
<style>
.cell {
height: 50px;
width: 100px;
text-align: center;
border:2px dotted gray;
}
.row
{
outline:green solid medium;
}
table
{
border:3px solid blue;
}
*
{
margin:10px;
padding:10px;
}
</style>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("#r1c2").siblings().css("outline", "red solid thick");
//$("#row3").siblings().css("outline", "red solid thick");
//$("#row3").prev().css("outline", "red solid thick");
//$("#r2c4").prev().css("outline", "red solid thick");
//$("#r2c4").prevAll().css("outline", "red solid thick");
//$("#r2c4").prevUntil("#r2c1").css("outline", "red solid thick");
//$("#r2c2").next().css("outline", "red solid thick");
//$("#r2c2").nextAll().css("outline", "red solid thick");
//$("#r2c2").nextUntil("#r2c4").css("outline", "red solid thick");
});
});
</script>
</head>
<body>
<table id="mytable">
<tr id="row1" class="row">
<td id="r1c1" class="cell">Row1 Cell1</td>
<td id="r1c2" class="cell">Row1 Cell2</td>
<td id="r1c3" class="cell">Row1 Cell3</td>
<td id="r1c4" class="cell">Row1 Cell4</td>
</tr>
<tr id="row2" class="row">
<td id="r2c1" class="cell">Row2 Cell1</td>
<td id="r2c2" class="cell">Row2 Cell2</td>
<td id="r2c3" class="cell">Row2 Cell3</td>
<td id="r2c4" class="cell">Row2 Cell4</td>
</tr>
<tr id="row3" class="row">
<td id="r3c1" class="cell">Row3 Cell1</td>
<td id="r3c2" class="cell">Row3 Cell2</td>
<td id="r3c3" class="cell">Row3 Cell3</td>
<td id="r3c4" class="cell">Row3 Cell4</td>
</tr>
<tr id="row4" class="row">
<td id="r4c1" class="cell">Row4 Cell1</td>
<td id="r4c2" class="cell">Row4 Cell2</td>
<td id="r4c3" class="cell">Row4 Cell3</td>
<td id="r4c4" class="cell">Row4 Cell4</td>
</tr>
</table><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
<html>
<head>
<title>DOM Traversal</title>
<style>
.cell {
height: 50px;
width: 100px;
text-align: center;
border:2px dotted gray;
}
.row
{
outline:green solid medium;
}
table
{
border:3px solid blue;
}
*
{
margin:10px;
padding:10px;
}
</style>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("body").children().css("outline", "red solid thick");
//$("#row1").children().css("outline", "red solid thick");
//$("body").find("tr").css("outline", "red solid thick");
//$("body").find("td").css("outline", "red solid thick");
});
});
</script>
</head>
<body>
<table id="mytable">
<tr id="row1" class="row">
<td id="r1c1" class="cell">Row1 Cell1</td>
<td id="r1c2" class="cell">Row1 Cell2</td>
<td id="r1c3" class="cell">Row1 Cell3</td>
<td id="r1c4" class="cell">Row1 Cell4</td>
</tr>
<tr id="row2" class="row">
<td id="r2c1" class="cell">Row2 Cell1</td>
<td id="r2c2" class="cell">Row2 Cell2</td>
<td id="r2c3" class="cell">Row2 Cell3</td>
<td id="r2c4" class="cell">Row2 Cell4</td>
</tr>
<tr id="row3" class="row">
<td id="r3c1" class="cell">Row3 Cell1</td>
<td id="r3c2" class="cell">Row3 Cell2</td>
<td id="r3c3" class="cell">Row3 Cell3</td>
<td id="r3c4" class="cell">Row3 Cell4</td>
</tr>
<tr id="row4" class="row">
<td id="r4c1" class="cell">Row4 Cell1</td>
<td id="r4c2" class="cell">Row4 Cell2</td>
<td id="r4c3" class="cell">Row4 Cell3</td>
<td id="r4c4" class="cell">Row4 Cell4</td>
</tr>
</table><br />
<button id="btnClick">Click!!!</button>
</body>
</html>
<html>
<head>
<title>DOM Traversal</title>
<style>
.cell {
height: 50px;
width: 100px;
text-align: center;
border:2px dotted gray;
}
.row
{
outline:green solid medium;
}
table
{
border:3px solid blue;
}
*
{
margin:10px;
padding:10px;
}
</style>
<!-- Add reference to latest jQuery file -->
<script type="text/javascript">
$(document).ready(function(){
$("#btnClick").click(function(){
$("#row1 td").first().css("outline", "red solid thick");
//$("#row1 td").last().css("outline", "red solid thick");
//$("#row1 td").eq(1).css("outline", "red solid thick");
//$("#row1 td").filter(":even").css("outline", "red solid thick");
//$("#row1 td").not(":even").css("outline", "red solid thick");
//$("#row1 td").slice(1).css("outline", "red solid thick");
//$("#row1 td").slice(1, 3).css("outline", "red solid thick");
//$("td").slice(5, 10).css("outline", "red solid thick");
//$("td").slice(11).css("outline", "red solid thick");
//$("tr").has("td").css("outline", "red solid thick");
});
});
</script>
</head>
<body>
<table id="mytable">
<tr id="row1" class="row">
<td id="r1c1" class="cell">Row1 Cell1</td>
<td id="r1c2" class="cell">Row1 Cell2</td>
<td id="r1c3" class="cell">Row1 Cell3</td>
<td id="r1c4" class="cell">Row1 Cell4</td>
</tr>
<tr id="row2" class="row">
<td id="r2c1" class="cell">Row2 Cell1</td>
<td id="r2c2" class="cell">Row2 Cell2</td>
<td id="r2c3" class="cell">Row2 Cell3</td>
<td id="r2c4" class="cell">Row2 Cell4</td>
</tr>
<tr id="row3" class="row">
<td id="r3c1" class="cell">Row3 Cell1</td>
<td id="r3c2" class="cell">Row3 Cell2</td>
<td id="r3c3" class="cell">Row3 Cell3</td>
<td id="r3c4" class="cell">Row3 Cell4</td>
</tr>
<tr id="row4" class="row">
<td id="r4c1" class="cell">Row4 Cell1</td>
<td id="r4c2" class="cell">Row4 Cell2</td>
<td id="r4c3" class="cell">Row4 Cell3</td>
<td id="r4c4" class="cell">Row4 Cell4</td>
</tr>
</table><br />
<button id="btnClick">Click!!!</button>
</body>
</html>