I am trying to create a set of buttons that change the color of a clicked cell in a table.
我正在尝试创建一组按钮来更改表中单击的单元格的颜色。
for example:
-
User chooses the blue button
用户选择蓝色按钮
-
Only one button is allowed to be active at a time.
一次只允许一个按钮处于活动状态。
-
Any cell that the user clicks on changes blue (or red, green, yellow or white depending on the button selected.
用户单击的任何单元格都会变为蓝色(或红色,绿色,黄色或白色,具体取决于所选按钮)。
The best I could do is the picture below. Please help or guide me to a solution. Thanks.
我能做的最好的是下图。请帮助或指导我找到解决方案。谢谢。
1 个解决方案
#1
0
Here is a working sample:
这是一个工作样本:
var color = "White"
$( "#btnBlue" ).click(function() {
color = "Blue"
});
$( "#btnGreen" ).click(function() {
color = "Green"
});
$( "#btnYellow" ).click(function() {
color = "Yellow"
});
$("table tr td").click(function(){
$(this).css("background-color", color);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<body>
<input id='btnBlue' type='button' value='Blue' >
<input id='btnGreen' type='button' value='Green' >
<input id='btnYellow' type='button' value='Yellow' >
<br>
<br>
<table>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col3</td>
<td>col4</td>
</tr>
</table>
</body>#1
0
Here is a working sample:
这是一个工作样本:
var color = "White"
$( "#btnBlue" ).click(function() {
color = "Blue"
});
$( "#btnGreen" ).click(function() {
color = "Green"
});
$( "#btnYellow" ).click(function() {
color = "Yellow"
});
$("table tr td").click(function(){
$(this).css("background-color", color);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<body>
<input id='btnBlue' type='button' value='Blue' >
<input id='btnGreen' type='button' value='Green' >
<input id='btnYellow' type='button' value='Yellow' >
<br>
<br>
<table>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col3</td>
<td>col4</td>
</tr>
</table>
</body>