Search code examples
javascripthtml-tabletablerow

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

After I highlight and delete the last row of the table, I can't move up. It seems to just go back and forth until I delete another row. After the first deleteRow, it works after deleting the odd numbered row. It gets stuck again after deleting an even numbered row. Last rows only.

So I know it's probably something to do with my even numbered rows.

Album Listing Table

I know after deleting the even numbered last row, the findLastHighlight() function returns "undefined".

In the moveUp() function, if the variable newHighlightedRow is assigned undefined, it will always go to the 1st row.

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;
}

Is my issue in the moveUp function or the newHighlightedRow variable?

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

Sorry, about the code being overly complicated. I'm just trying things out. Any assistance will be appreciated.

PS: Please ignore that the 1st and last rows are sometimes highlighted at the same time. That doesn't happen on my actual website.

Thank you.

Solution

  • I think I fixed it (still not sure if this is what you want)

    Basically the problem came from this in findLastHighlight function:

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

    so you look for highlighted row only in rows that are even and you don't take into account the odd rows that's why move up doesn't work when you delete an element

    doing this instead

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

    seems to fix it.

    JSFiddle.