Below is a simple html code for creating table with six rows.
<html>
<head><title>Odd Even Selector</title>
<link rel="stylesheet" type="text/css" href="odd_even_selector.css"
</head>
<body>
<table class="table">
<tr><td>Row one</td></tr>
<tr><td>Row two</td></tr>
<tr><td>Row three</td></tr>
<tr><td>Row four</td></tr>
<tr><td>Row five</td></tr>
<tr><td>Row six</td></tr>
</table>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="odd_even_selector.js"></script>
</body>
</html>
It is a css for styling table. .highlight is a new class giving special background color
//odd_even_selector.css
.table, .table tr, .table tr td{
border: 2px solid black;
}
.highlight{
background-color: #DEB887;
}
Below is a jquery code for styling odd and even selector. addClass add highlight class defined in odd_even_selector.css
//odd_even_selector.js
$(document).ready(function(){
$('.table tr:even').addClass('highlight');
});
<html>
<head><title>Odd Even Selector</title>
<link rel="stylesheet" type="text/css" href="odd_even_selector.css"
</head>
<body>
<table class="table">
<tr><td>Row one</td></tr>
<tr><td>Row two</td></tr>
<tr><td>Row three</td></tr>
<tr><td>Row four</td></tr>
<tr><td>Row five</td></tr>
<tr><td>Row six</td></tr>
</table>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="odd_even_selector.js"></script>
</body>
</html>
It is a css for styling table. .highlight is a new class giving special background color
//odd_even_selector.css
.table, .table tr, .table tr td{
border: 2px solid black;
}
.highlight{
background-color: #DEB887;
}
Below is a jquery code for styling odd and even selector. addClass add highlight class defined in odd_even_selector.css
//odd_even_selector.js
$(document).ready(function(){
$('.table tr:even').addClass('highlight');
});
 |
| output of above code |
No comments:
Post a Comment