我目前使用这种方法 贯穿/删除线 整个 HTML 表格行,效果很好。
但是,如何将其附加到 HTML 复选框单击方法?
http://jsfiddle.net/deaconf19/DrEhv/
<table border 1>
<tr>
<td>Status</td>
<td>Priority</td>
<td>Date</td>
<td>Event</td>
<td>Updated</td>
</tr>
<tr>
<td contenteditable/>Checkbox</td>
<td contenteditable/>3</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating again</td>
<td contenteditable/>02/07/2014</td>
</tr>
<tr class="strikeout">
<td contenteditable/>Checkbox</td>
<td contenteditable/>1</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating</td>
<td contenteditable/>02/07/2014</td>
</tr>
</table>
您可以使用 jQuery 查找复选框父项,并在复选框状态更改时向其添加类
if ( this.checked) {
$(this).parent().parent().addClass("strikeout");
} else {
$(this).parent().parent().removeClass("strikeout");
}
例
只需使用 javascript 来更改表类。如果使用 jQuery:
$('#myCheckbox').change(function(){
$('#myTableRow').toggleClass('strikeout', $(this).prop('checked'));
})
下面的文本假定您有一个带有 id="myCheckbox"
的复选框和一个带有 id="myTableRow"
的表格行。
如果纯JS可以做同样的事情,为什么要使用jQuery:
在 HTML 中,为复选框添加点击处理程序:
<input type="checkbox" onclick="strike(this)">
然后根据复选框值更改 TR 元素的类,如下所示:
function strike(elm) {
if(elm.checked) {
elm.parentNode.parentNode.className = "strikeout";
} else {
elm.parentNode.parentNode.className = "";
}
}
就这么简单!