使用下拉列表在HTML表中进行更改

Question

我想显示对下拉列表中一行表中任何单元格中的值所做的更改为红色。每个单元都有一个关联的下拉列表。但是，如果下拉列表中的值相同，并且单击了该单元格，则该单元格中的值不应更改颜色。我以为我可以保留原来的表格单元格数据的克隆副本在一个单独的函数 - 如果他们由然后进行比较的任何更改。然而，由于用户从细胞进入细胞这个信息在这里示出的函数，每次删除。该表格由一系列单元格组成-此处包含一个单元格。

// Attach listeners
window.onload = function() {
  var cellData = document.querySelectorAll('.dropdown-content p').forEach(
    node => node.addEventListener('click', displayCellData, false)
  );
}

function displayCellData(evt) {
  // to display the previous cell data
  evt.stopPropagation();
  var cell = this.closest('td');
  var origCellVal = [];
  // Array of original cell values  
  var previous = cell.previousElementSibling.innerHTML;
  console.log(previous);
  var cellVal = $(evt.target).text();
  origCellVal[cell.cellIndex] = previous;
  document.getElementById("displayArray").innerHTML = origCellVal;
  if (cellVal != previous) {
    previous = cellVal;
    // only change the text color if cellVal changed
    cell.previousElementSibling.innerHTML = "<span class='color-red'>" +
      cellVal + "</span>";
    if (previous = origCellVal[cell.cellIndex]) {
      cellVal.innerHTML = "<span class='color-black'>" + cellVal +
        "</span>";
    }
  }
}

table#t00, th,td {
border: 1px solid red;
width:80%;
margin-left:15%; 
margin-right:15%;
}
table#t01 {
table-layout: fixed;
  width: 100%; 
  background-color: #f1f1c1;
  height: 50px;
  text-align: center;
  font-size: large;
}
table#t02 {
table-layout: fixed;
  width: 100%; 
  background-color: #f1f1c1;
  height: 50px;
  text-align: center;
  font-size: large;
}
.equal-width td { 
width: 5%; 
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.color-red{
    color: #F00;
}

.color-black{
    color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="displayArray"></p>
<table>
  <tr>
    <td>Closed</td>
    <td>
      <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
          <p>OPEN</p>
          <p>Closed</p>
        </div>
      </div>
    </td>
    </td>
    . .

  </tr>
</table>

Answer 1

每次调用origCellValue时，您将创建一个新的空displayCellData()数组，因此它不保存先前调用中的值。

但是，建议您不要将信息保存在DOM本身中，而不要使用单独的数组。您可以在元素上使用dataset属性来保存信息。

您可以简单地更改<span>本身的类列表，而不用插入带有<td>元素的新HTML。

cellVal.innerHTML是错误的。 cellVal是一个字符串，而不是DOM元素。

// Attach listeners
window.onload = function() {
  var cellData = document.querySelectorAll('.dropdown-content p').forEach(
    node => node.addEventListener('click', displayCellData, false)
  );
}

function displayCellData(evt) {
  // to display the previous cell data
  evt.stopPropagation();
  var cell = this.closest('td');
  var prev = cell.previousElementSibling;
  if (!prev.dataset.origVal) {
    prev.dataset.origVal = prev.innerText;
  }
  var origVal = prev.dataset.origVal;
  if (evt.target.textContent == origVal) {
    prev.classList.remove("color-red");
    prev.classList.add("color-black");
  } else {
    prev.classList.remove("color-black");
    prev.classList.add("color-red");
  }
  prev.textContent = evt.target.textContent;
}

table#t00,
th,
td {
  border: 1px solid red;
  width: 80%;
  margin-left: 15%;
  margin-right: 15%;
}

table#t01 {
  table-layout: fixed;
  width: 100%;
  background-color: #f1f1c1;
  height: 50px;
  text-align: center;
  font-size: large;
}

table#t02 {
  table-layout: fixed;
  width: 100%;
  background-color: #f1f1c1;
  height: 50px;
  text-align: center;
  font-size: large;
}

.equal-width td {
  width: 5%;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.color-red {
  color: #F00;
}

.color-black {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="displayArray"></p>
<table>
  <tr>
    <td>Closed</td>
    <td>
      <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
          <p>OPEN</p>
          <p>Closed</p>
        </div>
      </div>
    </td>
    </td>
    . .

  </tr>
</table>