1

I have a table with a checkbox. And I wanna do when checkbox is checked, cross out Task and Id. I read about On Change, and i know the css property but i don't know how identify the task and id to crossout

This is my project: Crud PHP

This is my code:

<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>

I found a code and I tried adapt it but is wrong

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

Thanks

Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
ZeR0ByTe
  • 53
  • 1
  • 11
  • "*i don't know how identify the task and id to crossout*" - with respect, do the research, we won't write it for you, we are not here to do that, you need to show you have researched and attempted to do this, not just ask us to do it for you – Can O' Spam Jul 03 '18 at 08:10
  • Sorry @SamSwift웃 I have edited my post and have add code in JS. – ZeR0ByTe Jul 03 '18 at 08:22
  • getElementByTagName should be `getElementsByTagName` and it returns a collection you need to loop through – Pete Jul 03 '18 at 08:33
  • Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) – Pete Jul 03 '18 at 08:34
  • in jQuery, you don't usually trigger a function using onChange or onClick, you use the $(element).on() method – carkod Jul 03 '18 at 08:53

2 Answers2

1

You did not fire your code on the onchange event.

This is what I did:

  • I changed your javascript to jquery code.
  • Added a handler for the onchange event with jquery on() function.
  • and added classes to the td for the id IdRow and task TaskRow to be able to use it in a jquery selector.
  • Added a new class my-fancy-checkbox for the checkbox to select the checkbox. (select on input:checkbox is bad because it gets all checkboxes on the document.)
  • changed the css property textDecoration to text-decoration.
  • Added parents('tr') for multiple rows as proposed by @Pranbir Sarkar
  • Added $(document).ready() to bind the event handler after the document is fully loaded.

$(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>
Mark Baijens
  • 13,028
  • 11
  • 47
  • 73
1

My suggestion is to use click event and have to use $(this) to detect the clicked element and use the .parent to get the parent element of it.. Then you can apply the css. I created the complete code..

Example : 

$(':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/

Pranbir Sarkar
  • 111
  • 1
  • 10
  • Use of parents selector is a smart choice indeed. changing `parent().parent()` to `.parents('tr')` is even more beautiful though. Less code and keeps working if the the checkbox is placed inside another element later for example. – Mark Baijens Jul 03 '18 at 09:03
  • Also a checkbox can be checked without a mouse click too. People can use the keyboard (common for blind people) or change it with program code for example. Therefore I think `change()` is better – Mark Baijens Jul 03 '18 at 09:34
  • 1
    Wow.. That's better . I had not ever think for this situation.. Thanks for sharing this idea.. It will help me in future... Happy Coding ..:) – Pranbir Sarkar Jul 03 '18 at 09:37
  • Thanks @PranbirSarkar, is perfect! but i have tried put it in my code but when i clicked nothing happen. Also i have replace all my code and i put your table and code and not working. I use Jquery 3.3.1 slim with bootstrap and I put the Jquery code in the end – ZeR0ByTe Jul 03 '18 at 09:42
  • @ZeR0ByTe Did you checked the jsfiddle link ( https://jsfiddle.net/u57h9xLv/25/ ) I shared ?? Go through that code.. You can see the table structure's code as well as the jQuery code.. Compare with your code.. If any mismatch in your code and my code, please let me know. – Pranbir Sarkar Jul 03 '18 at 09:45
  • Yes i have checked the jsfiddle and works perfectly and i copy all the table and replace in my code, and also te Jquery code, but nothing happen in my web when i click the checkbox. I don't know why :S – ZeR0ByTe Jul 03 '18 at 09:56
  • @ZeR0ByTe Do you have any javascript erros in the console? And do you execute the javascript code after the dom is loaded? – Mark Baijens Jul 03 '18 at 09:57
  • @ZeR0ByTe Also check whether your JQuery is loaded before this part of code or not.. **First declare the JQuery then write this codes**... the – Pranbir Sarkar Jul 03 '18 at 10:02
  • @MarkBaijens i don't have errors in console and i put the code like this: – ZeR0ByTe Jul 03 '18 at 10:07
  • You just did a small syntax error.. : put at the end.. you used – Pranbir Sarkar Jul 03 '18 at 10:14
  • Thanks @PranbirSarkar, I'm an stupid. Sorry and thanks again. Now it's perfect. I will try adapt to my CRUD now. :) – ZeR0ByTe Jul 03 '18 at 11:02