改变一切 <td> 特定表格的颜色onclick
[英]changing all <td> color onclick for a particular table
问题描述
iam using below code to toggle td color 
我使用下面的代码来切换td颜色
<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 上面的代码通过切换td颜色工作正常，请在这里查看演示
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", 上面的代码适用于所有tds，我需要它只适用于表类“mytable”的最后一列，
- i need to add a button which when clicked should change all td's color to "white" of table class "mytable" 我需要添加一个按钮，单击该按钮时，应将所有td的颜色更改为表类“mytable”的“白色”
- compleate row should be red color when we select partcular cell. 当我们选择部分细胞时，补充行应为红色。 please help me to fix this 请帮我解决这个问题
6 个解决方案
解决方案1
4 已采纳 2012-09-10 08:27:05
HTML 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 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');
});
});
解决方案2
3 2012-09-10 08:10:48
Just change your jQuery selector to td:last-child 只需将您的jQuery选择器更改为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/ http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/2/
For your second question, you need the HTML and jQuery: 对于第二个问题，您需要HTML和jQuery：
HTML: HTML：
<button id="tableButton">White</button>
jQuery: 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 :) 这是一种方法，你当然可以再次选择最后一个子选择器的td，但这段代码是一个很好的起点:)
http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/3/ http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/3/
解决方案3
1 2012-09-10 08:21:38
HTML //add the follwing code into html HTML //将以下代码添加到html中
<input type="submit" value="submit" id="button">
JS CODE JS代码
$(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'})
});
解决方案4
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 希望第二个也会奏效
解决方案5
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");
});
});
解决方案6
0 2012-09-10 09:34:22
Now check this 现在检查一下
$(function(){
$("tr:last-child td").click(function(){
$("tr:last-child td").addClass("on");
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.