JavaScript

Question

在我突出显示并删除 table 的最后一行后，我无法向上移动。在我删除另一行之前，它似乎只是来回走动。在第一个 deleteRow 之后，它在删除奇数行之后起作用。删除偶数行后再次卡住。仅最后几行。

所以我知道这可能与我的偶数行有关。

我知道删除偶数最后一行后，findLastHighlight() 函数 returns“未定义”。

在 moveUp() 函数中，如果变量 newHighlightedRow 被赋值为 undefined，它将始终转到第 1 行。

let newHighlightedRow = (lastHighlightedRow == 1)  ? 
            (allTableRows.length - 1) : (lastHighlightedRow - 2);

function moveUp(e) {
  let lastHighlightedRow = findLastHighlight();
  let allTableRows = [...document.querySelectorAll(".track_row")];

  let newHighlightedRow = (lastHighlightedRow == 1) ?
    (allTableRows.length - 1) : (lastHighlightedRow - 2);

  if (!lastHighlightedRow) {
    allTableRows[0].classList.add("selected_album_row");
    allTableRows[0].scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center"
    });
  } else {
    if (lastHighlightedRow % 2 == 0) {
      allTableRows[newHighlightedRow].classList.add("selected_album_row");
      allTableRows[newHighlightedRow].scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center"
      });
    } else {
      allTableRows[newHighlightedRow].style.backgroundColor = "aquamarine";
      allTableRows[newHighlightedRow].scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "center"
      });
    }
  }

}

function findLastHighlight() {
  let lastRowIndex;
  let allTableRows = [...document.querySelectorAll(".track_row")];
  let evenTableRows = allTableRows.filter(allTableRow => allTableRow.rowIndex % 2 == 0);
  let oddTableRows = allTableRows.filter(allTableRow => allTableRow.rowIndex % 2 != 0);

  oddTableRows.forEach((oddTableRow) => {
    if (oddTableRow.classList.contains("selected_album_row")) {
      oddTableRow.classList.remove("selected_album_row");
      lastRowIndex = oddTableRow.rowIndex;
    }
  });
  evenTableRows.forEach((evenTableRow) => {
    if (evenTableRow.style.backgroundColor == "aquamarine") {
      evenTableRow.style.backgroundColor = "";
      lastRowIndex = evenTableRow.rowIndex;
    }
  });
  return lastRowIndex;
}

我的问题是出在 moveUp 函数还是 newHighlightedRow 变量上？

https://jsfiddle.net/donfontaine12/6wnvp0sz/6/

抱歉，代码过于复杂。我只是在尝试。如有任何帮助，我们将不胜感激。

PS：请忽略第一行和最后一行有时会同时突出显示。这不会发生在我的实际网站上。

谢谢。

Answer 1

我想我修复了它（仍然不确定这是否是您想要的）

基本上问题出在 findLastHighlight 函数中：

evenTableRows.forEach((evenTableRow) => {
    if (evenTableRow.style.backgroundColor == "aquamarine") {
      evenTableRow.style.backgroundColor = "";
      lastRowIndex = evenTableRow.rowIndex;
    }
  });

因此您只在偶数行中查找突出显示的行，而没有考虑奇数行，这就是为什么在删除元素时向上移动不起作用的原因

改为这样做

allTableRows.forEach((evenTableRow) => {
    if (evenTableRow.style.backgroundColor == "aquamarine") {
      evenTableRow.style.backgroundColor = "";
      lastRowIndex = evenTableRow.rowIndex;
    }
  });

似乎已修复。

JSFiddle.

JavaScript - 在最后一行的 deleteRow 之后，无法通过 table 正确向上移动

JavaScript - After deleteRow of the last row, can't move up through the table properly

html-table

tablerow