Блог

Главная - Вопросы по программированию - Как получить записи HTML-таблицы с помощью JavaScript?

Как получить записи HTML-таблицы с помощью JavaScript?

#javascript #html #cookies

#javascript #HTML #файлы cookie

Вопрос:

Я работаю над проектом веб-программирования, и мне нужна помощь с одной из частей, связанных с интернет-файлами 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);
            }
        }

}

Ответ №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>