当复选框将状态更改为“已检查”（纯javascript）时跨表行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当复选框将状态更改为“已检查”（纯javascript）时跨表行相关的知识，希望对你有一定的参考价值。
有一个简单的标记。当复选框将状态更改为“已检查”时，我需要在与复选框相同的表格行中交叉文本。任何帮助赞赏
function watcher(){
var checkboxElements = document.getElementsByClassName("checkbox");
for(var i = 0; i<checkboxElements.length; i++){
checkboxElements[i].addEventListener('change', function(){
if(checkboxElements[i].checked === true) {
table.querySelector("table").rows[i].style.textDecoration = 'line-through';
}
});
}
}<table class='table'>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
</table>我的代码似乎不起作用
答案
您需要使用函数closest()以及上下文this找到祖先以获取checkbox元素的引用。
function watcher() {
var checkboxElements = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxElements.length; i++) {
checkboxElements[i].addEventListener('change', function() {
if (this.checked) {
this.closest('tr').style.textDecoration = 'line-through';
}
});
}
}
watcher();<table class='table'>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
</table>以上是关于当复选框将状态更改为“已检查”（纯javascript）时跨表行的主要内容，如果未能解决你的问题，请参考以下文章