如何使用 Javascript 从 tr 获取第一个 td 值？答案

【问题标题】：How to get the first td value from tr with Javascript?如何使用 Javascript 从 tr 获取第一个 td 值？
【发布时间】：2019-02-14 20:20:05
【问题描述】：

<tr>
  <td>Test Data</td>
  <td>2016</td>
  <td>59</td>
  <td>10-12-2014</td>
  <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
 </tr>

我有一个表格，其中有上面定义的连续数据。我想要做的是，当点击<i> 时，我想获取行的第一个值，即“测试数据”。

这些行位于一个 id 为 #list 的 div 中。

del(target,title) {
  if (target.className === 'fa fa-trash') {
    // Here I need the first td(which is the title) that I can compare in LocalStorage and delete that specific item
  }
}

document.getElementById('list').addEventListener('click', function (e) {
  const tr = e.target.parentElement.parentElement.parentElement;
  console.log(tr);

  del(e.target, title);
});

这给出了以下控制台输出：

<tr>
  <td>Test Data</td>
  <td>2016</td>
  <td>59</td>
  <td>10-12-2014</td>
  <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
</tr>

从这一点来说，不使用jQuery如何到达第一个<td>？

【问题讨论】：

var td_first = tr.children[0] 是第一个 td

标签： javascript tr

【解决方案1】：

我会先让您的点击监听器更具体一点，这样它就不会触发整个表格的任何点击。

然后您通过获取tr 非常接近，从那里您可以将 tr 传递给del 函数并在tr 上使用getElementsByTagName 从tr 返回第一个td .

然后你可以使用removeChild删除你刚刚从tr父节点查询到的第一个td。

这是一个例子：

function del(e){
    let firstTD = e.getElementsByTagName("td")[0];
    console.log(firstTD);
    e.removeChild(firstTD);
}

document.querySelectorAll('#list .fa').forEach(function(trash) {
  trash.addEventListener('click', function(e) {
    const tr = e.target.parentElement.parentElement.parentElement;
    del(tr);
  });

});

<div id="list">
  <table>
    <tbody>
      <tr>
        <td>Test Data</td>
        <td>2016</td>
        <td>59</td>
        <td>10-12-2014</td>
        <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash">trash</i></a></td>
      </tr>
      <tr>
        <td>Test Data 2</td>
        <td>2015</td>
        <td>33</td>
        <td>11-23-2012</td>
        <td><a href="#" class="delete-item secondary-content"><i class="fa fa-trash">trash</i></a></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：