如何使用JavaScript从表访问`<tr>`元素

要使用JavaScript从表中访问<tr>元素，你可以首先使用document.getElementById()或document.getElementsByTagName()方法来访问表元素。然后，你可以使用表格的childNodes属性来访问表格中的<tr>元素。

我们的重点是当我们把鼠标悬停在当前行（我们当前所在的行）上时，改变该行的背景颜色，并在鼠标离开时将背景颜色恢复到正常。

例子

因此，让我们假设我们有以下HTML代码来渲染一个表格。

<!DOCTYPE html>
<html>
<head>
   <title>
    Access tr element
   </title>
   <style type="text/css">
    th,
    td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ccc;
    }
   </style>
</head>
<body>
   <table id="my_table">
      <tr>
         <th>Player</th>
         <th>Country</th>
         <th>Role</th>
      </tr>
      <tr>
       <td>Virat Kohli</td>
       <td>India</td>
       <td>Middle Order Batsman</td>
      </tr>
        <tr>
         <td>Steve Smith</td>
         <td>Australia</td>
         <td>Middle Order Batsman</td>
      </tr>
      <tr>
         <td>Jofra Archer</td>
         <td>England</td>
         <td>Opening Fast Bowler</td>
      </tr>
      <tr>
         <td>Rashid Khan</td>
         <td>Afghanistan</td>
         <td>Spin All-Rounder</td>
      </tr>
   </table>
</body>
</html>

这就是表格开始时的样子 —

如何使用JavaScript从表访问tr元素

我们的任务是在我们悬停的行上添加一个深色的背景，一旦鼠标离开该行，就删除这个背景。

方法

由于我们需要对<tr>（表格行）进行处理并应用特定的样式，而不是整个表格，我们将尝试以某种方式选择表格的行。
我们将使用 document.getElementByTagName 函数来选择所有<tr>（表格行）。
然后在循环浏览这些行的时候，我们将为它们附加事件监听器，监听悬停事件。
最后，在事件监听器中，我们将编写改变颜色的逻辑。

例子

因此，最终的代码将看起来像这样 —

<!DOCTYPE html>
<html>
<head>
   <title>
    Hello World
   </title>
   <style type="text/css">
    th,
    td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
   </style>
</head>
<body>
   <table id="my_table">
    <tr>
        <th>Player</th>
        <th>Country</th>
        <th>Role</th>
    </tr>
    <tr>
        <td>Virat Kohli</td>
        <td>India</td>
        <td>Middle Order Batsman</td>
    </tr>
    <tr>
        <td>Steve Smith</td>
        <td>Australia</td>
        <td>Middle Order Batsman</td>
    </tr>
    <tr>
        <td>Jofra Archer</td>
        <td>England</td>
        <td>Opening Fast Bowler</td>
    </tr>
    <tr>
        <td>Rashid Khan</td>
        <td>Afghanistan</td>
        <td>Spin All-Rounder</td>
    </tr>
   </table>
    <script>
      const tableRows = document.getElementsByTagName('tr');
      // starting from 1 instead of 0
      // because we don’t want to apply the styling to header
      for (let curr = 1; curr < tableRows.length; curr++) {
         tableRows[curr].addEventListener('mouseover', function(e){
            console.log("over");
            tableRows[curr].style.backgroundColor = '#aaa';
         });
            tableRows[curr].addEventListener('mouseleave', function(e){
               console.log("leave");
               tableRows[curr].style.backgroundColor = '';
         });
      }
    </script>
</body>
</html>