主页 / 问题 / 1437210
Accepted
user503400
Asked:2022-08-08 02:55:00 +0000 UTC2022-08-08 02:55:00 +0000 UTC

如何使用条件循环遍历 HTML 中的表格？

  • 772

问题是，当我使用“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>

javascript html

1 个回答

  1. Best Answer

    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>

    • 1

相关问题