如何使用 JavaScript 获取 HTML 表格的条目？答案

【问题标题】：How to get the entries of an HTML table with JavaScript?如何使用 JavaScript 获取 HTML 表格的条目？
【发布时间】：2020-11-02 01:13:35
【问题描述】：

我正在从事一个 Web 编程项目，我需要一些与 Internet cookie 相关的部分的帮助。该网页有一个列出所有网页成员的表格，我想访问每个人的电子邮件。但是，我尝试了很多方法来做到这一点，并且我认为无法找到该表（当我打印包含它的变量时，它会打印 null）。然后，如果有人能提出一种访问 HTML 表格并获取其中一些条目的好方法，我将不胜感激。我在这里留下 HTML 表格代码和 JavaScript 函数如何从中获取数据。

表格代码：

<table id="student-info">
    <tr>
        <th>Student</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Email</th>
        <th>Contact</th>
    </tr>
    <tr>
        <td><img class="student-image" src="images/Student1.jpg" alt="Tarra Theisen profile picture"></td>
        <td>Tarra</td>
        <td>Theisen</td>
        <td>tarratheisen@gmail.com</td>
        <td><button class = "send-button"><i class="far fa-paper-plane"></i></button></td>
    </tr>
    <tr>
        <td><img class="student-image" src="images/Student2.jpeg" alt="Patrick Beverley profile picture"></td>
        <td>Patrick</td>
        <td>Beverley</td>
        <td>patrickbev@gmail.com</td>
        <td><button class = "send-button"><i class="far fa-paper-plane"></i></button></td>
    </tr>
</table>

JS中的函数代码：

function showTableData() {
     
     var myTab = document.getElementById('student-info');

        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 1; i < myTab.rows.length; i++) {

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;

            // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
            for (var j = 0; j < objCells.length; j++) {
              alert(objCells.item(j).innerHTML);
            }
        }

}

【问题讨论】：

标签： javascript html cookies

【解决方案1】：

更好的方法是提供电子邮件字段类，然后获取这些字段。

(function showTableData() {
  var email = [];
  var arr = document.getElementsByClassName("email");
  for (let i = 0; i < arr.length; i++) {
    email.push(arr[i].innerHTML);
  }
  console.log(email);
})();

<table id="student-info">
      <tr>
        <th>Student</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Email</th>
        <th>Contact</th>
      </tr>
      <tr>
        <td>
          <img class="student-image" alt="Tarra Theisen profile picture" />
        </td>
        <td>Tarra</td>
        <td>Theisen</td>
        <td class="email">tarratheisen@gmail.com</td>
        <td>
          <button class="send-button">
            <i class="far fa-paper-plane"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <img class="student-image" alt="Patrick Beverley profile picture" />
        </td>
        <td>Patrick</td>
        <td>Beverley</td>
        <td class="email">patrickbev@gmail.com</td>
        <td>
          <button class="send-button">
            <i class="far fa-paper-plane"></i>
          </button>
        </td>
      </tr>
    </table>

【讨论】：

【解决方案2】：

您的代码对我来说似乎运行良好。如果您只想获取您知道它的索引为 3 的电子邮件，那么就以这种方式获取它

function showTableData() { 
  var myTab = document.getElementById('student-info');
  var emailList = document.getElementById('emails');
  for (i = 1; i < myTab.rows.length; i++) {
    var objCells = myTab.rows.item(i).cells;
    for (var j = 0; j < objCells.length; j++) {
      if (j === 3) {
        var emailText = objCells.item(j).innerHTML;
        var email = document.createElement('li');
        email.appendChild(document.createTextNode(emailText));
        emailList.appendChild(email);
      }
    }
  }
}

showTableData();

<table id="student-info">
    <tr>
        <th>Student</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Email</th>
        <th>Contact</th>
    </tr>
    <tr>
        <td><img class="student-image" src="images/Student1.jpg" alt="Tarra Theisen profile picture"></td>
        <td>Tarra</td>
        <td>Theisen</td>
        <td>tarratheisen@gmail.com</td>
        <td><button class = "send-button"><i class="far fa-paper-plane"></i></button></td>
    </tr>
    <tr>
        <td><img class="student-image" src="images/Student2.jpeg" alt="Patrick Beverley profile picture"></td>
        <td>Patrick</td>
        <td>Beverley</td>
        <td>patrickbev@gmail.com</td>
        <td><button class = "send-button"><i class="far fa-paper-plane"></i></button></td>
    </tr>
</table>

<ul id="emails">
Emails
</ul>

【讨论】：