选择和取消选择表格单元格html/javascript

Select and unselect table cells html/javascript

本文关键字：选择 javascript html 表格 取消 单元格      更新时间：2023-09-26

我有一个表在我的网站。当用户单击单元格时，我需要单元格颜色改变，并在第二次单击时返回默认颜色。我已经完成了第一部分，但不知道如何在第二次点击时恢复到默认颜色。

<head>    
     <script type="text/javascript">
   function ChangeColor(tableRow, highLight)
   {
     if (highLight)
     {
       tableRow.style.backgroundColor = '#dcfac9';
     }
     else
     {
       tableRow.style.backgroundColor = 'white';
     }
   }
</head>
<body>
  <table width="100%" border="1" cellpadding="0" cellspacing="0">
     <tr onClick="ChangeColor(this, true);" 
       <td>1</td>
       <td>2</td>
       <td>3</td>
     </tr>
    <tr onClick="ChangeColor(this, true);">
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr onClick="ChangeColor(this, true);">
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>

我建议创建一个css类.highlight {background-color: '#dcfac9'}

，然后，在javascript中，调用。toggleclass ('highlight')点击行

不要将highlight作为参数传递给函数，只需调用您的功能上点击只有一个这样。然后在函数中进行检验细胞的颜色也会随之变化。

或者如果你想让它更通用，你也可以传递默认值颜色和要改变的新颜色。函数看起来像这样。

  function ChangeColour(tableRow, defaultColour, newColour)
    {
      var bg = tableRow.style.backgroundColor;
      if (bg == defaultColour)
     {
        tableRow.style.backgroundColor = newColour;
     }
      else
    {
         tableRow.style.backgroundColor = defaultColour;
     }
     }

就像@Devasayal上面说的，toggleClass是你最好的解决方案…

演示小提琴
< Javascript代码/em> 

function ChangeColor(elem) {
    if (elem.className != "highlight") {
        elem.className = "highlight";
    } else {
        elem.className = "";
    }
}

您可以使用类来代替。创建一些简单的函数来添加、删除和切换类:

function hasClass(el, className) {
  return (' ' + el.className + ' ').indexOf(' ' + className + ' ') != -1;  
}
function addClass(el, className) {
  if (!hasClass(el, className)) {
    el.className += (el.className? ' ' : '') + className;
  } 
}
function removeClass(el, className) {
  if (hasClass(el, className)) {
    el.className = (' ' + el.className + ' ').replace(' ' + className + ' ', ' ');
  }
}
function toggleClass(el, className) {
  hasClass(el, className)? removeClass(el, className) : addClass(el, className);
}

然后，给定一个类:

.red { background-color: red;}

使用方式如下:

<div id="d0">red</div>
<button onclick="toggleClass(document.getElementById('d0'), 'red')">Toggle red</button>

只需按标记名获取元素，循环遍历每个td并添加一个事件侦听器。

单击后，切换一个类来添加所请求的背景色。

const tds = document.getElementsByTagName('td');
Object.values(tds).forEach(td => {
  td.addEventListener("click", changeColor);
});
function changeColor() {
  this.classList.toggle("light-green");
}
table,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  padding: 10px 13px;
}
td:hover {
  background-color: grey;
  color: white;
  cursor: pointer;
}
.light-green {
  background-color: #dcfac9;
}
.light-green:hover {
  background-color: green;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

相关文章：