Question

我的网站上有一张桌子。我需要在用户点击它时更改单元格颜色，并在第二次单击时返回默认颜色。我已完成第一部分，但不知道如何在第二次点击时恢复为默认颜色。

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

Answer 1

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

单击，切换将添加所请求背景颜色的类。

＆＃13;

const tds = document.getElementsByTagName('td');

Object.values(tds).forEach(td => {
  td.addEventListener("click", changeColor);
});

function changeColor() {
  this.classList.toggle("light-green");
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

不要将高亮作为参数传递给您的函数，只需调用您的点击功能只有一个这样。然后在功能中你可以检查细胞的颜色并相应地改变。

或者如果你想让它更通用，你也可以传递默认值颜色和要更改的新颜色。该功能将如下所示。

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

Answer 3

我建议像创建一个css类 .highlight {background-color：＆＃39;＃dcfac9＆＃39;}

然后，在javascript中，点击该行时调用.toggleClass（＆＃39;突出显示＆＃39;）。

Answer 4

正如@Devasayal所说toggleClass对你来说是最好的解决方案......

<强> Demo Fiddle
Javascript代码

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

Answer 5

您可以改用班级。创建一些简单的函数来添加，删除和切换类：

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>

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

5 个答案: