javascript - 改变时，划掉表格

Question

我有一个带有复选框的表格。当复选框被选中时，我想做的是，划掉 Task 和 Id。我阅读了 On Change，我知道 css 属性，但我不知道如何识别要删除的任务和 ID

这是我的项目: Crud PHP

这是我的代码:

<div class="col-md-8">
    <table class="table table-dark table-striped table-hover text-center">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Tasks</th>
                <th scope="col">Finished</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($tasks as $task):?>
                <tr>
                    <th scope="row"><?php echo $task['Id'] ?></th>
                    <td><?php echo $task['Task'] ?></td>
                    <td>
                        <?php if ($task['Finished'] == 0){ ?>
                            <div class="form-check">
                                <input class="form-check-input position-static" type="checkbox" id="checkbox<?php echo $task['Id'] ?>" value="option<?php echo $task['Id'] ?>">
                            </div>
                            </td>
                        <?php }else{ ?>
                            <div class="form-check">
                                <input class="form-check-input position-static" type="checkbox" id="checkbox<?php echo $task['Id'] ?>" value="option<?php echo $task['Id'] ?>"checked>
                            </div>
                        <?php };?>
                    <td>
                        <a class="btn btn-warning mr-2" href="functions/editTask.php?Id=<?php echo $task['Id'] ?>">Edit</a>
                        <a class="btn btn-danger" href="functions/deleteTask.php?id=<?php echo $task['Id'] ?>">Delete</a></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

我找到了一个代码，我尝试修改它但是错了

function crossOutTask() {
    check = document.getElementByTagName("input:checkbox");
    if (check.checked) {
        $('tr').css('textDecoration','line-through');
    } else {
        $('tr').css('textDecoration', 'none');
    }
}

谢谢

Answer 1

我的建议是使用点击事件并且必须使用 $(this) 来检测被点击的元素并使用 .parent 来获取它的父元素。然后你可以应用 css。 我创建了完整的代码..

示例:

$(':checkbox').click(function(e) {
   if ($(this).is(':checked')) {
    $(this).parent().parent().find('td').css('textDecoration', 'line-through');
  } else {
    $(this).parent().parent().find('td').css('textDecoration', '');
 }
});

JSFiddle 链接:https://jsfiddle.net/u57h9xLv/25/