删除表和/或DIV

时间:2014-04-07 14:57:59

标签: javascript html css

我目前使用这种方法Linethrough/strikethrough a whole HTML table row,效果很好。

但是,如何将其附加到HTML复选框onclick方法?

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>

3 个答案:

答案 0 :(得分:2)

你可以使用jQuery来查找父项的父项复选框,并在复选框的状态发生变化时为其添加一个类

if ( this.checked) {
  $(this).parent().parent().addClass("strikeout");
} else {
 $(this).parent().parent().removeClass("strikeout");
}

Example

答案 1 :(得分:1)

只需使用javascript更改表类。如果使用jQuery:

$('#myCheckbox').change(function(){
    $('#myTableRow').toggleClass('strikeout', $(this).prop('checked'));
})

以下文字假设您有一个id="myCheckbox"的复选框和一个id="myTableRow"的表格行。

答案 2 :(得分:1)

如果纯JS 可以做同样的事情,为什么要使用jQuery:

在HTML中,为复选框添加onclick处理程序:

<input type="checkbox" onclick="strike(this)">

然后根据复选框值更改TR元素的类,如下所示:

function strike(elm) {
    if(elm.checked) {
        elm.parentNode.parentNode.className = "strikeout";
    } else {
        elm.parentNode.parentNode.className = "";
    }
}

就这么简单!