Как я могу получить только одно значение столбца из таблицы HTML?

Question

У меня есть HTML-таблица, которая показывает список идентификаторов пользователей, имя и адрес электронной почты. Когда мой пользователь щелкает мышью в любой строке, я получаю номер идентификатора этой строки и отправляю его на свой сервер. Итак, я сделал это:

//Making the table
var trs = document.getElementsByTagName('tr');

for (var i = 0; i < trs.length; i++) {
  trs[i].onclick = clickHandler;   
}

Функция, которая обрабатывает щелчок:

function clickHandler(event) {
  var numb = this.innerText.match(/\d/g);
  numb = numb.join("");
  window.location.replace("chooseParticipant.php?id="+numb);  
}

Пример таблицы:

<div id="table">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <td>7</td>
            <td>Test User</td>
            <td>testuser123@example.com</td>
        </tbody>
    </table>
</div>

Что происходит потом? Если у пользователя есть числа в его электронной почте, переменная «онемение» тоже получает эти числа. Я не знаю, как фильтровать только номер идентификатора. У кого-нибудь были идеи?

Answer 1

Попробуйте этот фрагмент кода, который использует data-* атрибут

document.addEventListener('DOMContentLoaded', function(e) {
  var trs = document.querySelectorAll('#table tbody tr');
  var repeater = Array.prototype.slice;
  repeater.call(trs).forEach(function(tr) {
    tr.addEventListener('click', function(e) {
      var data = tr.querySelector('td[data-id]').dataset;
      console.log('id=', data.id);
    });
  });
});

tbody {
  cursor: pointer;
}

<div id="table">
  <table border="1" cellspacing="0" cellpadding="3">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-id="7">7</td>
        <td>Test User 1</td>
        <td>testuser1231@gmail.com</td>
      </tr>
      <tr>
        <td data-id="8">8</td>
        <td>Test User 2</td>
        <td>testuser1232@gmail.com</td>
      </tr>
      <tr>
        <td data-id="9">9</td>
        <td>Test User 3</td>
        <td>testuser1233@gmail.com</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Вы можете назначить класс для вашего тега. Примерно так: -

    <td class="id">7</td>

И в коде javascript вы можете получить все элементы с классом "id". А затем выполните свой обработчик кликов для каждого из них.

    var trs = document.getElementsByClassName('id');

Надеюсь, это поможет.