eliinka
Reputation: 27
Click-event <td> in a table - change colors
I'm doing a table with 6x6 columns () which are now empty with white background. My assignment is that when clicking on a column, it should change color between green, red and gray (depending on how many times you've clicked the specific column).
Code:
<table style="width: 100%; height: 100%; margin: 0 auto; border-bottom:groove; border-left:groove; border-right:groove; border-top:groove; width: 75%; height: 75%;">
<tr style="border-bottom:medium;">
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
</tr>
<tr>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
</tr>
<tr>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
</tr>
<tr>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
</tr>
<tr>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
</tr>
<tr>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
<td style="border-bottom:groove; border-left:groove; border-right:groove; border-top:groove;"> </td>
</tr>
</table>
I have no idea how to proceed, if I should use jQuery functions and such... Thankful for all answers/tips!
Upvotes: 1
Views: 2119
Answers (4)
Anoop
Reputation: 1
Just include a jquery file in your page and use the following script
<script>
$("table td").on("click", function () {
if ($(this).data("isDirty") != undefined) {
switch($(this).data("isDirty")) {
case '1':
$(this).css("background-color", "gray");
$(this).data("isDirty", '2');
alert($(this).data("isDirty"));
break;
case '2':
$(this).css("background-color", "red");
$(this).data("isDirty", '3');
break;
default:
$(this).css("background-color", "black");
$(this).data("isDirty", '4');
}
}
else {
$(this).data("isDirty","1");
$(this).css("background-color", "green");
}
});
</script>
Upvotes: 0
Abdennour TOUMI
Reputation: 93591
DEMO : http://jsfiddle.net/abdennour/6K6gU/3/
Our code work on column and not rows . This is what you want
$('td').click(function(){
var col=$('tbody td:nth-child('+($(this).parent('tr').index()+1)+')')
if($(this).hasClass('green')){
col.removeClass().addClass('red')
}else if($(this).hasClass('red')){
col.removeClass().addClass('gray')
}
else if($(this).hasClass('gray')){
col.removeClass().addClass('gray')
}else {
col.removeClass().addClass('green')
}
})
UPDATE :
if you want : White -> Green-> Red-> Gray --> White
See : http://jsfiddle.net/abdennour/6K6gU/4/
Upvotes: 0
dschu
Reputation: 5374
Here is my solution. Hope this helps: http://jsfiddle.net/8gHeD/
HTML
<table class="grooveTable">
<tr >
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
JavaScript
colorArray = ['none','red','green','blue'];
$('.grooveTable').on('click','td', function(){
console.log( $(this).data('color') );
console.log( colorArray.length );
color = $(this).data('color') == undefined ? 0 : $(this).data('color')*1;
if( color == undefined || color == colorArray.length )
{
$(this).css('background-color',colorArray[0]);
$(this).data('color','0');
}
else
{
$(this).css('background-color',colorArray[color+1]);
$(this).data('color',color+1);
}
});
CSS
.grooveTable {
width: 100%;
height: 100%;
margin: 0 auto;
border-bottom:groove;
border-left:groove;
border-right:groove;
border-top:groove;
}
.grooveTable td {
cursor: pointer;
border-bottom:groove;
border-left:groove;
border-right:groove;
border-top:groove;
}
.grooveeTable tr:first {
border-bottom:medium;
}
Upvotes: 2
Think Different
Reputation: 2815
FOR CHANGING BACKGROUND COLOUR OF THE WHOLE ROW: You can achieve it like the following: DEMO FIDDLE
$(document).ready(function(){
$('table').on('click','tr',function(){
switch($(this).attr('class')){
case 'green':
$(this).removeClass('green');
$(this).addClass('red');
break;
case 'red':
$(this).removeClass('red');
$(this).addClass('gray');
break;
case 'gray':
$(this).removeClass('gray');
// $(this).addClass('red');
break;
default:
$(this).addClass('green');
}
});
});
FOR CHANGING BACKGROUND COLOUR OF SPECIFIC COLUMN:
$(document).ready(function(){
$('table').on('click','td',function(){
switch($(this).attr('class')){
case 'green':
$(this).removeClass('green');
$(this).addClass('red');
break;
case 'red':
$(this).removeClass('red');
$(this).addClass('gray');
break;
case 'gray':
$(this).removeClass('gray');
// $(this).addClass('red');
break;
default:
$(this).addClass('green');
}
});
});
Upvotes: 1
Related Questions
- Changing the color of a clicked table row using jQuery
- Change colour of table row onclick
- changing all <td> color onclick for a particular table
- jQuery changing color of <td> background on click
- How do I change a specific TD's background color on click with JavaScript/jQuery?
- How to change the text color of the clicked row of table with css and jquery
- How do I get the td color to change color upon a second click?
- Change background color of a table row on click
- Change background color for rows of an HTML table on click
- coloring table column on click