На замену вычеркнуть таблицу

Question

У меня есть таблица с флажком. И я хочу сделать, когда флажок установлен, вычеркнуть Task и Id. Я читал об Изменении и знаю свойство css, но не знаю, как определить задачу и идентификатор для вычеркивания

Это мой проект: Сырой 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

Я предлагаю использовать событие click и использовать $ (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 Link: https://jsfiddle.net/u57h9xLv/25/

Answer 2

Вы не запустили свой код в событии onchange.

Вот что я сделал:

• Я изменил ваш javascript на код jquery.
• Добавлен обработчик для события onchange с функцией jquery on().
• и добавили классы в td для идентификатора IdRow и задачи TaskRow, чтобы иметь возможность использовать его в селекторе jquery.
• Добавлен новый класс my-fancy-checkbox для флажка, чтобы установить флажок. (выберите на input:checkbox плохо, потому что он получает все флажки в документе.)
• изменено свойство textDecoration css на text-художественное оформление.
• Добавлено parents('tr') для нескольких строк, как предложено @Pranbir Sarkar
• Добавлено $(document).ready() для привязки обработчика событий после полной загрузки документа.

$(document).ready(function(){
    $('input.my-fancy-checkbox').on('change', function(){
        if(this.checked) {
            $(this).parents('tr').find('.IdRow, .TaskRow').css('text-decoration','line-through');
        }
        else {
            $(this).parents('tr').find('.IdRow, .TaskRow').css('text-decoration', 'none');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
                    <tr>
                        <td class="IdRow" scope="row">12345</td>
                        <td class="TaskRow">TestTask</td>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input position-static my-fancy-checkbox" type="checkbox" id="checkbox12345" value="option12345">
                            </div>
                        </td>
                        <td>
                            <a class="btn btn-warning mr-2" href="functions/editTask.php?Id=12345">Edit</a>
                            <a class="btn btn-danger" href="functions/deleteTask.php?id=12345">Delete</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="IdRow" scope="row">12345</td>
                        <td class="TaskRow">TestTask</td>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input position-static my-fancy-checkbox" type="checkbox" id="checkbox12345" value="option12345">
                            </div>
                        </td>
                        <td>
                            <a class="btn btn-warning mr-2" href="functions/editTask.php?Id=12345">Edit</a>
                            <a class="btn btn-danger" href="functions/deleteTask.php?id=12345">Delete</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>