如何使用Java從tr獲取第一個td值？

Question

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

Answer 1

首先，讓您的點擊監聽器更具體一些，這樣就不會觸發整個表的點擊。

然后，你是通過獲取非常接近tr ，從那里你可以通過TR到del功能和使用的getElementsByTagName在tr返回第一個td從tr 。

然后，您可以使用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>