Внесение изменений в таблицу HTML с использованием выпадающего списка - PullRequest
Новая
       39

Внесение изменений в таблицу HTML с использованием выпадающего списка

0 голосов
/ 31 января 2019

Я хочу, чтобы изменения, внесенные в значение в любой ячейке таблицы из одной строки в раскрывающемся списке, были выделены красным цветом.С каждой ячейкой связан выпадающий список.Однако, если в выпадающем списке и щелчке по ячейке отображается одно и то же значение, значение в ячейке не должно менять цвет.Я подумал, что могу сохранить клонированную копию исходных данных ячейки таблицы в отдельной функции, а затем сравнить любые изменения, если они будут сделаны.Однако эта информация удаляется каждый раз в функции, показанной здесь, когда пользователь переходит от ячейки к ячейке.Таблица состоит из серии ячеек - сюда включена одна ячейка. 

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

1 Ответ

0 голосов
/ 31 января 2019

Вы создаете новый пустой массив origCellValue каждый раз, когда вызываете displayCellData(), поэтому он не содержит значений из предыдущих вызовов.

Однако вместо использования отдельного массива,Я предлагаю вам сохранить информацию в самом DOM.Вы можете использовать атрибут dataset в элементе для сохранения информации.

И вместо того, чтобы вставлять новый HTML с элементами <span>, вы можете просто изменить список классов самого <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>
...