The goal is to have a table in which users can select a row and have it highlight, and should they select another row the previous selection return to its original class. The table rows have alternating colors and mouseovers and I am unsure
how to get this to work the way I like. I prefer to make this work without using jquery but any ideas are welcome even if we have to use jquery
A very easy solution would be to use actually use jQuery, as it makes working with DOM elements much easier. However, I'll show examples using both jQuery and Javascript.
jQuery Method
In order to implement this, you would create a function that would be fired when one of your rows was clicked. Within this function, you would remove your "selected" class from any of the rows within your table and then add it to the one that was clicked
(essentially selecting it).
<!-- jQuery Reference -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Your <script> to toggle your classes -->
<script type='text/javascript'>
$(document).ready(function(){
//When a row is clicked
$('tr').click(function(){
//Remove the selected class from any rows
$('tr.selected').removeClass('selected');
//Add it to this current row
$(this).addClass('selected');
});
});
</script>
along with this simple markup (for example purposes)
You could accomplish the same above with Javascript by adding an onclick event to each of your rows and performing the same basic logic :
<script type='text/javascript'>
//The onclick event fired when one of your rows is clicked
function selectRow(rowClicked){
//Get all of the rows in your table
var rows = document.getElementById('yourtable').rows;
//Iterates through all of your rows and removes the selected class
for(var i = 0; i < rows.length; i++){
rows[i].className = rows[i].className.replace('selected','');
}
//Adds the selected class to your clicked row
rowClicked.className += ' selected';
}
</script>
amitmgandhi
Member
1 Points
15 Posts
Toggle CSS class
Feb 26, 2013 03:04 PM|LINK
Hello,
The goal is to have a table in which users can select a row and have it highlight, and should they select another row the previous selection return to its original class. The table rows have alternating colors and mouseovers and I am unsure how to get this to work the way I like. I prefer to make this work without using jquery but any ideas are welcome even if we have to use jquery
Cheers,
amit
Rion William...
All-Star
26624 Points
4414 Posts
Re: Toggle CSS class
Feb 26, 2013 03:19 PM|LINK
A very easy solution would be to use actually use jQuery, as it makes working with DOM elements much easier. However, I'll show examples using both jQuery and Javascript.
jQuery Method
In order to implement this, you would create a function that would be fired when one of your rows was clicked. Within this function, you would remove your "selected" class from any of the rows within your table and then add it to the one that was clicked (essentially selecting it).
<!-- jQuery Reference --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- Your <script> to toggle your classes --> <script type='text/javascript'> $(document).ready(function(){ //When a row is clicked $('tr').click(function(){ //Remove the selected class from any rows $('tr.selected').removeClass('selected'); //Add it to this current row $(this).addClass('selected'); }); }); </script>along with this simple markup (for example purposes)
<table> <tr><td>Row I</td><td>Row I</td><tr/> <tr><td>Row II</td><td>Row II</td><tr/> <tr><td>Row III</td><td>Row III</td><tr/> <tr><td>Row IV</td><td>Row IV</td><tr/> <tr><td>Row V</td><td>Row V</td><tr/> </table>Working Example
Pure Javascript Method
You could accomplish the same above with Javascript by adding an onclick event to each of your rows and performing the same basic logic :
<script type='text/javascript'> //The onclick event fired when one of your rows is clicked function selectRow(rowClicked){ //Get all of the rows in your table var rows = document.getElementById('yourtable').rows; //Iterates through all of your rows and removes the selected class for(var i = 0; i < rows.length; i++){ rows[i].className = rows[i].className.replace('selected',''); } //Adds the selected class to your clicked row rowClicked.className += ' selected'; } </script>using this markup :
<table id='yourtable'> <tr onclick='selectRow(this);'><td>Row I</td><tr/> <tr onclick='selectRow(this);'><td>Row II</td><tr/> <tr onclick='selectRow(this);'><td>Row III</td><tr/> <tr onclick='selectRow(this);'><td>Row IV</td><tr/> <tr onclick='selectRow(this);'><td>Row V</td><tr/> </table>Example
Pengzhen Son...
Star
8144 Points
839 Posts
Microsoft
Re: Toggle CSS class
Feb 27, 2013 07:39 AM|LINK
Hi,
You can use CSS to set the mouseovers style like this
#nav_bar tr{ color: blue; }#nav_bar tr(odd){#nav_bar td:hover { color: red; } <table cellspacing="0" cellpadding="0" id="nav_bar"> <tr> <td><a href="yada yada">yada yada</a></td> </tr> </table>And you can use javascript or jquery to change the style of the element dynamically like this.
$().ready(function() { $(".jtable th").each(function() { $(this).addClass("ui-state-default"); }); $(".jtable td").each(function(){ $(this).addClass("ui-widget-content"); }); $(".jtable tr").hover( function() { $(this).children("td").addClass("ui-state-hover"); }, function() { $(this).children("td").removeClass("ui-state-hover"); } ); $(".jtable tr").click(function(){ $(this).children("td").toggleClass("ui-state-highlight"); }); });Please refer here
http://www.ke-cai.net/2010/01/theme-your-table-with-jquery-ui.html
Hope it can help you.
Feedback to us
Develop and promote your apps in Windows Store