description
- Create table grid with active color (highlight) when clicked a row using javascript (jquery).
howto
1. download jquery.
2. create index.html , css folder(inside the folder create style.css)
and js folder (inside the folder put jquery file).
3. here's the code :
- declare js and css.
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
- create simple table grid :
* for row table , give id for example #rowtable
<table>
<tr>
<th>row 1 , cell 1 , this is header 1</td>
<th>row 1 , cell 2 , this is header 2</td>
</tr>
<tr id="rowtable">
<td>row 2 , cell 1 , this is values 1</td>
<td>row 2 , cell 1 , this is values 2</td>
</tr>
<tr id="rowtable">
<td>row 3 , cell 1 , this is values 1</td>
<td>row 3, cell 1 , this is values 2</td>
</tr>
</table>
- add css code to your style.css
tr{ /* make sure change cursor when over row , it looks like profesional LOL */
cursor: pointer;
cursor: hand;
}
#rowtable:hover{
background:orange !important;
}
#rowtable.clicked{ /*it means id='rowtable' class='clicked'*/
background:orange;
}
- now add javascript code using jquery
$("document").ready(function(){
$('tr').click(function() {
$(this).removeClass("clicked")
$(this).addClass("clicked").siblings().removeClass("clicked");
});
});
4. DONE , now you can highlight the row when click , and it's automatic remove highlight
when change to another row :)
