如何从 html 表中仅获取一列值？答案

【问题标题】：How can I get only one column value from html table?如何从 html 表中仅获取一列值？
【发布时间】：2018-09-09 23:04:22
【问题描述】：

我有一个显示用户 ID、姓名和电子邮件列表的 html 表。当我的用户点击任何一行时，我会得到该行的 ID 号并发送到我的后端。所以，我这样做了：

//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>

然后会发生什么？如果用户的电子邮件中有数字，“numb”变量也会获取这些数字。我不知道如何只过滤身份证号码。有人有什么想法吗？

【问题讨论】：

如果您添加了一个示例 tr，我们也许可以，只有也许，可以帮助您。
我现在做到了。你认为这需要更多信息吗？
首先HTML是无效的。那么，为什么要选择整个 tr 而不是只选择你需要的元素呢？
如果我只将点击处理程序事件添加到 TD 元素，我的用户将需要点击数字才能触发该功能。我真的需要用户单击该行的任何点。为什么 HTML 无效？我不明白。
HTML 无效，因为您的 td 周围没有任何 tr（在 tbody 中）。

标签： javascript json html-table

【解决方案1】：

你可以为你的标签分配一个类。如下所示：-

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

在 javascript 代码中，您可以获取所有具有“id”类的元素。然后对每一个执行你的点击处理程序。

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

我希望这会有所帮助。

【讨论】：

谢谢！帮了大忙。
id 似乎是一个非常糟糕的课程名称。

【解决方案2】：

试试这个使用data-*属性的代码sn-p

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>

【讨论】：