javascript - 如何使用 JavaScript 获取 HTML 表格的条目？

Question

我正在从事一个 Web 编程项目，我需要一些与 Internet cookie 相关的部分的帮助。该网页有一张表格，列出了所有网页成员，我想访问他们每个人的电子邮件。但是，我尝试了很多方法来做到这一点，并且我认为找不到该表（当我打印包含它的变量时，它会打印空）。然后，如果有人能提出一种访问 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>[e-mail]</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>[e-mail]</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);
            }
        }

}

标签： javascripthtmlcookies

Answer 1

您的代码似乎对我来说工作正常。如果您只想获取您知道它的索引为 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>[e-mail]</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>[e-mail]</td>
        <td><button class = "send-button"><i class="far fa-paper-plane"></i></button></td>
    </tr>
</table>

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