<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>
然后我想得到第一个值为“Test Data”的行。
这些行位于具有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>