Menu
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,
456
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');
});
});
DEMO
$(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');
});
});
Demo
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
