【问题标题】：Javascript Change TD bgColor onClickJavascript 更改 TD bgColor onClick
【发布时间】：2017-06-24 16:11:55
【问题描述】：
我有这段代码，当您单击表格单元格时，它会将颜色切换为红色，同时关闭行中已经为红色的任何单元格，以便一行中只有一个单元格是红色的。
这也发生在第二行，因此该行中只有一个单元格是红色的。
我想要发生的是整个表格中只有一个单元格是红色的，这将是一个 13 行的表格最终只有一个细胞是红色的。对此的任何帮助表示赞赏。
var el
function togCell(col){
if (typeof event!=='undefined')
el=event.srcElement
for (var i = 0; i < el.parentNode.cells.length; i++)
el.parentNode.cells[i].style.backgroundColor=''
el.style.backgroundColor=col
}
if (window.addEventListener)
window.addEventListener('click', function(e){el=e.target}, true)
table {
cursor:text;
}
td {
font-size:14;
cursor:default;
}
<table border="1" cellpadding="8" cellspacing="2">
<tr style="background-color:white;">
<td onclick="togCell('red')">AA</td>
<td onclick="togCell('red')">AKs</td>
<td onclick="togCell('red')">AQs</td>
<td onclick="togCell('red')">AJs</td>
<td onclick="togCell('red')">ATs</td>
<td onclick="togCell('red')">A9s</td>
<td onclick="togCell('red')">A8s</td>
<td onclick="togCell('red')">A7s</td>
<td onclick="togCell('red')">A6s</td>
<td onclick="togCell('red')">A5s</td>
<td onclick="togCell('red')">A4s</td>
<td onclick="togCell('red')">A3s</td>
<td onclick="togCell('red')">A2s</td>
</tr>
<tr style="background-color:white;">
<td onclick="togCell('red')">AKo</td>
<td onclick="togCell('red')">KK</td>
<td onclick="togCell('red')">KQs</td>
<td onclick="togCell('red')">KJs</td>
<td onclick="togCell('red')">KTs</td>
<td onclick="togCell('red')">K9s</td>
<td onclick="togCell('red')">K8S</td>
<td onclick="togCell('red')">K7s</td>
<td onclick="togCell('red')">K6s</td>
<td onclick="togCell('red')">K5s</td>
<td onclick="togCell('red')">K4s</td>
<td onclick="togCell('red')">K3s</td>
<td onclick="togCell('red')">K2s</td>
</tr>
</table>
【问题讨论】：
标签：
javascript
html
onclick
html-table
【解决方案1】：
希望这可行...唯一的事情是我用 jQuery 完成了它。如果您想要使用纯 Javascript，请告诉我，一段时间后，我也会为此分享 sn-p。
$(function(){
$(".row td.column").on("click",function(){
if($(this).parent().children('td.active').length > 0) {
$(this).siblings().removeClass('active');
}
$(this).addClass('active')
})
});
table tr td{
border: 1px solid red;
}
.active{
background-color: red;
}
<table class="container">
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
<tr class="row">
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
<td class="column">ABC</td>
</tr>
</table>
【解决方案2】：
首先我对你的 HTML 做了一些改动：
然后我添加了一个名为 red 的新 CSS 类：
最后我做了一个只保留一个红细胞的JQuery函数：
(function togCell(){
$('td').click(function(e){
$('td').removeClass('red');
$(this).addClass('red');
});
})();
table {
cursor:text;
}
td {
font-size:14;
cursor:default;
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="8" cellspacing="2">
<tr style="background-color:white;">
<td id="1">AA</td>
<td id="2">AKs</td>
<td id="3">AQs</td>
<td id="4">AJs</td>
<td id="5">ATs</td>
<td id="6">A9s</td>
<td id="7">A8s</td>
<td id="8">A7s</td>
<td id="9">A6s</td>
<td id="10">A5s</td>
<td id="11">A4s</td>
<td id="12">A3s</td>
<td id="13">A2s</td>
</tr>
<tr style="background-color:white;">
<td id="14">AKo</td>
<td id="15">KK</td>
<td id="16">KQs</td>
<td id="17">KJs</td>
<td id="18">KTs</td>
<td id="19">K9s</td>
<td id="20">K8S</td>
<td id="21">K7s</td>
<td id="22">K6s</td>
<td id="22">K5s</td>
<td id="23">K4s</td>
<td id="24">K3s</td>
<td id="25">K2s</td>
</tr>
在 liveweave 中测试。
【解决方案3】：
如果你只想使用jquery，你要做的就是
$('td').on('click', function(){
$('td').css('background-color', '');
$(this).css('background-color', 'red');
})
从 html 中删除 onclick="togCell('red')
或者
在你的代码中
var el
function togCell(col) {
if (typeof event !== 'undefined')
el = event.srcElement
$('td').css('background-color', '') // Using jQuery. Only this line is changed
el.style.backgroundColor = col
}
if (window.addEventListener)
window.addEventListener('click', function(e) {
el = e.target
}, true)
或者
使用纯 JavaScript
var el
function togCell(col) {
if (typeof event !== 'undefined')
el = event.srcElement
elements = document.getElementsByTagName('td');
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "";
}
el.style.backgroundColor = col
}
if (window.addEventListener)
window.addEventListener('click', function(e) {
el = e.target
}, true)
$('td').on('click', function() {
$('td').css('background-color', '');
$(this).css('background-color', 'red');
})
function togCell() {}
table {
cursor: text;
}
td {
font-size: 14;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="8" cellspacing="2">
<tr style="background-color:white;">
<td onclick="togCell('red')">AA</td>
<td onclick="togCell('red')">AKs</td>
<td onclick="togCell('red')">AQs</td>
<td onclick="togCell('red')">AJs</td>
<td onclick="togCell('red')">ATs</td>
<td onclick="togCell('red')">A9s</td>
<td onclick="togCell('red')">A8s</td>
<td onclick="togCell('red')">A7s</td>
<td onclick="togCell('red')">A6s</td>
<td onclick="togCell('red')">A5s</td>
<td onclick="togCell('red')">A4s</td>
<td onclick="togCell('red')">A3s</td>
<td onclick="togCell('red')">A2s</td>
</tr>
<tr style="background-color:white;">
<td onclick="togCell('red')">AKo</td>
<td onclick="togCell('red')">KK</td>
<td onclick="togCell('red')">KQs</td>
<td onclick="togCell('red')">KJs</td>
<td onclick="togCell('red')">KTs</td>
<td onclick="togCell('red')">K9s</td>
<td onclick="togCell('red')">K8S</td>
<td onclick="togCell('red')">K7s</td>
<td onclick="togCell('red')">K6s</td>
<td onclick="togCell('red')">K5s</td>
<td onclick="togCell('red')">K4s</td>
<td onclick="togCell('red')">K3s</td>
<td onclick="togCell('red')">K2s</td>
</tr>
</table>
【解决方案4】：
这是最有效的解决方案，因为它在表格级别使用单个委托事件（而不是每个表格单元格上的几十个事件）。此解决方案还使用实时HTMLCollection，无需重新检查当前选择的内容。
另外请注意，您应该避免直接使用 CSS 样式，考虑 CSS 类，这是更灵活的方法（假设您想更改选定单元格上的几个 CSS 道具，而不仅仅是背景）。
检查一下：
var table = document.querySelector('#table')
var selectedCells = table.getElementsByClassName('selected')
table.addEventListener('click', function(e) {
var td = e.target
if (td.tagName !== 'TD') {
return
}
if (selectedCells.length) {
selectedCells[0].className = ''
}
td.className = 'selected'
})
table {
cursor: text;
}
tr {
background-color:white;
}
td {
font-size: 14;
cursor: default;
}
td.selected {
background-color: red;
}
<table border="1" cellpadding="8" cellspacing="2" id="table">
<tr>
<td>AA</td>
<td>AKs</td>
<td>AQs</td>
<td>AJs</td>
<td>ATs</td>
<td>A9s</td>
<td>A8s</td>
<td>A7s</td>
<td>A6s</td>
<td>A5s</td>
<td>A4s</td>
<td>A3s</td>
<td>A2s</td>
</tr>
<tr>
<td>AKo</td>
<td>KK</td>
<td>KQs</td>
<td>KJs</td>
<td>KTs</td>
<td>K9s</td>
<td>K8S</td>
<td>K7s</td>
<td>K6s</td>
<td>K5s</td>
<td>K4s</td>
<td>K3s</td>
<td>K2s</td>
</tr>
</table>