Javascript更改TD bgColor onClick

时间：2017-02-07 12:06:12

标签： javascript html onclick html-table

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

4 个答案:

答案 0 :(得分：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 :(得分：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>

答案 2 :(得分：1)

首先，我对您的HTML进行了一些更改：

然后我添加了一个名为red的新CSS类：

最后我创建了一个只保留一个红色单元格的JQuery函数：

＆＃13;
＆＃13; 
(function togCell(){
  $('td').click(function(e){
    $('td').removeClass('red');
    $(this).addClass('red');
    
  });
  
})();
＆＃13; 
table {
cursor:text;
}
td {
font-size:14;
cursor:default;
}
.red {
  background-color: red;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

在liveweave中测试。

答案 3 :(得分：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)

＆＃13;
＆＃13; 
$('td').on('click', function() {

  $('td').css('background-color', '');
  $(this).css('background-color', 'red');

})

function togCell() {}
＆＃13; 
table {
  cursor: text;
}
td {
  font-size: 14;
  cursor: default;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题