JavaScript - 在最后一行的 deleteRow 之后，无法正确向上移动表格

Posted 2023-03-05

【中文标题】JavaScript - 在最后一行的 deleteRow 之后，无法正确向上移动表格

【英文标题】：JavaScript - After deleteRow of the last row, can't move up through the table properly

【发布时间】：2022-01-18 17:55:50

【问题描述】：

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

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

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

在 moveUp() 函数中，如果变量 newHighlightedRow 被赋值为 undefined，它会一直到第一行。

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：请忽略第一行和最后一行有时会同时突出显示。这不会发生在我的实际网站上。

谢谢。

【问题讨论】：

在您提供的 jsfiddle 中，删除也无法正常工作..

它从表中删除该行的视觉效果最差。你指的是代码吗？我添加了这段代码：allTableRows.splice(rowIndexForDeletion - 1,1); ，但将其注释掉，因为它并没有太大变化。

我的意思是，例如，如果您删除 Track No 15，它将改为删除 Track No 17。

哦，不，它会重新编号所有曲目。如果需要，您可以禁用它。这是函数 renumberAllTracks()

【参考方案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.

【讨论】：

哇，谢谢。我想你修好了。我已经尝试了数周来修复它，我知道这将是一个简单的改变。谢谢。