[英]How to iterate through table tr and get the value for first td? JavaScript
[英]How to get the first td value from tr with Javascript?
<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>
?
首先,让您的点击监听器更具体一些,这样就不会触发整个表的点击。
然后,你是通过获取非常接近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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.