changing all <td> color onclick for a particular table
Question
iam using below code to toggle td color
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$("td").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
</script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.on { background-color:red; color:#ffffff; }
</style>
</head>
<body>
<table class="mytable" border=1>
<tbody>
<tr>
<td>Hello World</td>
<td>Hello World1</td>
<td>Hello World2</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World1</td>
<td>Hello World2</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World1</td>
<td>Hello World2</td>
</tr>
</tbody>
</table>
</body>
</html>
above code works fine by toggling td color, please check the demo here
but now i need to do three things,
- above code is working for all the tds ,i need it to work only for last column of table class "mytable",
- i need to add a button which when clicked should change all td's color to "white" of table class "mytable"
- compleate row should be red color when we select partcular cell. please help me to fix this
6 answers
solution1
4 ACCPTED 2012-09-10 08:27:05
HTML
<table class="mytable" border=1>
<tbody>
<tr>
<td>Hello World</td>
<td>Hello World1</td>
<td>Hello World2</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World1</td>
<td>Hello World2</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World1</td>
<td>Hello World2</td>
</tr>
</tbody>
</table>
<button id="change-color">Change Color</button>
jQuery
$(function() {
$(".mytable tr td:last-child").click(function() {
$(this).addClass("on").parent().siblings("tr").find("td.on").removeClass("on");
})
$('#change-color').click(function() {
$('.mytable td.on').removeClass('on');
});
});
According to comment
$(function() {
$(".mytable tr td:last-child").click(function() {
$('td.on').removeClass('on');
$(this).parent().find('td').addClass("on");
})
$('#change-color').click(function() {
$('.mytable td.on').removeClass('on');
});
});
solution2
3 2012-09-10 08:10:48
Just change your jQuery selector to td:last-child
$(function(){
$("td:last-child").click(function(){ //this is the changed part
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/2/
For your second question, you need the HTML and jQuery:
HTML:
<button id="tableButton">White</button>
jQuery:
$("button#tableButton").click( function() {
$("table.mytable *").css({"background":"#fff", "color":"#000"});
});
This is one way to do it, you can of course select just the td with the last child selector again, but this code is a good place to start :)
solution3
1 2012-09-10 08:21:38
HTML //add the follwing code into html
<input type="submit" value="submit" id="button">
JS CODE
$(function(){
$('td:last-child').click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
$('#button').on('click', function(){
$('.mytable').find('td').css({'background':'#FFF', 'color':'#000'})
});
solution4
0 2012-09-10 08:58:01
For your second question
$("#Button_for_color").click( function() {
$("table .mytable").css({"background":"black", "color":"white"});
});
and for the first i didnt sure but it works like
$(function(){
$("td:last-child").click(function(){
//You can play here
});
hope the second will also works
solution5
0 2012-09-10 09:05:15
For your third question:
$(function(){
$("td").click(function(){
$("td").removeClass("on");
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
solution6
0 2012-09-10 09:34:22
Now check this
$(function(){
$("tr:last-child td").click(function(){
$("tr:last-child td").addClass("on");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.