logo标签列表

JavaScript 更改 TD 背景颜色 onClick

javascripthtmlonclickhtml-table
3

我有一段代码，当你点击表格单元格时，它会将颜色切换为红色，并关闭该行中已经变为红色的任何单元格，以便在一行中只有一个单元格是红色的。 这也发生在第二行，以便该行中只有一个单元格是红色的。
我想要的是整个表格中只有一个单元格是红色的，这将是一个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>

任何有效的东西。 - Michael
4个回答
3
这是最有效的解决方案，因为它在表级别上使用单个委托事件（而不是每个表格单元上的数十个事件）。此外，此解决方案使用实时 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>

1

希望这个能够运行...唯一的问题是我使用了jQuery。如果你想要使用纯JavaScript，请让我知道，我稍后也会分享那段代码片段。

$(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>

1

首先我对你的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中测试过。

1
如果您想仅使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接