我有这个示例代码来突出显示表格的特定单元格。有没有办法切换颜色或同时使用多种颜色？
我正在尝试制作一个按钮来切换突出显示的颜色。默认情况下，当一个值被选中时，它以绿色突出显示。我想要一个按钮，这样当我点击时，我的下一个选择将是不同的颜色。所以每次我点击这个按钮，下一个选择都会是不同的颜色。有没有一种简单的方法可以实现这一目标？
这是 fiddle https://jsfiddle.net/g28xasd7/和我的代码:
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').removeClass("highlight").filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}
或者有其他方法可以改变颜色吗？
最佳答案
注意ID，它们必须是唯一的。我直接使用了背景颜色，而不是类。
我的代码片段是:
$(function () {
$('.selector').on('click', function(e) {
var checked = this.name;
var selectedColor = '';
if (this.checked) {
selectedColor = $('#nextColor').val();
// instead if you need a random color generated automatically:
// selectedColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}
$('td').filter(function() {
return this.textContent == checked;
}).css('background-color', selectedColor);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="sidebar1">
<body class="twoColLiqLt">
<div id="container1">
<div id="sidebar11">
<h3>Choose a color: <input id="nextColor" type="color" value="#9ac99d"> Parameters:</h3>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="A" class="selector"/>A</label>
<label>
<input type="checkbox" name="B" class="selector"/>B</label>
<label>
<input type="checkbox" name="12" class="selector"/>12</label>
<label>
<input type="checkbox" name="Y" class="selector"/>Y</label>
<label>
<input type="checkbox" name="Z" class="selector"/>Z</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="checkbox" name="K" class="selector"/>K</label>
<label>
<input type="checkbox" name="J" class="selector"/>J</label>
<label>
<input type="checkbox" name="M" class="selector"/>M</label>
<label>
<input type="checkbox" name="T" class="selector"/>T</label>
<label>
<input type="checkbox" name="N" class="selector"/>N</label>
</form>
</div>
</div>
<div id="mainContent">
<h3 align="right"> </h3>
<div>
<table width="200" border="1">
<tr>
<td>A</td>
<td> </td>
<td>M</td>
<td> </td>
<td>K</td>
<td>J</td>
</tr>
<tr>
<td> </td>
<td>B</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> 12</td>
<td> </td>
<td>12</td>
<td> </td>
<td>Y</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>M</td>
<td> </td>
<td>T</td>
<td>K</td>
<td> </td>
<td>Z</td>
</tr>
</table>
</div>
</div>关于jquery - 带有jquery的颜色切换按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38043045/