On change, cross out table
Multi tool use
On change, cross out table
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:
# Tasks Finished Actions
" value="option">
</td>
<?php }else{ ?>
" value="option"checked>
<?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
Sorry @SamSwift웃 I have edited my post and have add code in JS.
– ZeR0ByTe
Jul 3 at 8:22
getElementByTagName should be getElementsByTagName and it returns a collection you need to loop through
– Pete
Jul 3 at 8:33
getElementsByTagName
Possible duplicate of What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?
– Pete
Jul 3 at 8:34
in jQuery, you don't usually trigger a function using onChange or onClick, you use the $(element).on() method
– carkod
Jul 3 at 8:53
2 Answers
2
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/
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 3 at 9:03
parent().parent()
.parents('tr')
@ Mark Baijens .. Correct, agree with you ..
– Pranbir Sarkar
Jul 3 at 9:07
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 3 at 9:34
change()
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 3 at 9: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 3 at 9:42
You did not fire your code on the onchange event.
This is what I did:
on()
IdRow
TaskRow
my-fancy-checkbox
input:checkbox
parents('tr')
$(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');
}
});
});
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
"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
– Sam Swift 웃
Jul 3 at 8:10