时间戳

首页 > 解决方案 > 使用下拉列表在 HTML 表格中进行更改

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

问题描述

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

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

标签： javascripthtmldropdownbox

解决方案

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

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

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

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>

推荐阅读