使用下拉列表更改 HTML Table

Question

我想以红色显示对下拉列表中一行 table 中任何单元格中的值所做的更改。每个单元格都有一个关联的下拉列表。但是，如果下拉列表中的相同值和单元格被单击，则单元格中的值不应改变颜色。我想我可以在一个单独的函数中保留原始 Table 单元格数据的克隆副本 - 然后比较任何更改（如果有）。但是，当用户从一个单元格转到另一个单元格时，每次在此处显示的函数中都会删除此信息。 table 由一系列单元格组成 - 此处包含一个单元格。

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

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

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

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

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>

使用下拉列表更改 HTML Table

Making changes in HTML Table using Dropdown List

html

javascript

dropdownbox