Как перебрать таблицу в HTML c условием?

Question

Проблема такая, когда навожу на первую строку с событием "mousemove", то текст находящийся в первой строке должен становится красным. Когда на вторую - синим. Но на выходе, как только мышь заходит на таблицу срабатывает сразу два обработчика. И текст и в первой и во второй строке становится окрашенным. Как пофиксить данную проблему.

function fn() {
  let res = document.querySelector("table");
  let resArray = Array.from(res.rows);
  resArray.forEach((i, index) => {
    if (index == 0) {
      i.style.color = "red";
    } else if (index == 1) {
      i.style.color = "blue";
    }
  });
}

tableTest.addEventListener("mousemove", () => {
  fn();
});

 <table border="1" cellspacing="10" width="400" id="tableTest">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table>

Answer 1

Событие mousemove избыточное, оно срабатывает десятки раз пока ты наводишь курсор на строку таблицы.

Работает с event.target, - элемент, на котором возникло событие. Сверяем, если элемент равен необходимой строке, красим её.

function fn(event) {

  if (event.target.tagName == 'TD') {

    let table = document.querySelector("table");
    let tr = event.target.closest('tr');

    if (tr == table.rows[0]) {
      tr.style.color = "red";
    }

    if (tr == table.rows[1]) {
      tr.style.color = "blue";
    }
  }
}

tableTest.addEventListener("mouseover", fn);

<table border="1" cellspacing="10" width="400" id="tableTest">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

БЛОГ НА HUSL

Как перебрать таблицу в HTML c условием?

Ответы (1 шт):