HTML Row table selection

HTML Row table selection - javascript

I have a table where the first column is a checkbox that selects the current row and the header has a SelectAll checkbox.
The table also gets selected when the user clicks on the row ( the checkbox becomes checked ).
My problem is that when I do the select all, all the checkboxes get selected but the rows are not being selected also.
My checkboxes have the change function so I assumed that when I hit the select all, the change method would execute as well, but this does not happen.
$(document).ready(function() {
$('#selectAll').click(function(event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
$('.record_table tr').click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
$("input[type='checkbox']").change(function(e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
.record_table {
width: 100%;
border-collapse: collapse;
}
.record_table tr:hover {
background: #eee;
}
.record_table td {
border: 1px solid #eee;
}
.highlight_row {
background: #eee;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
<tr class="header">
<th>
<input type="checkbox" id="selectAll" />
</th>
<th>Hello</th>
<th>Hello</th>
</tr>
<tr class="selectable">
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
</table>
JS Fiddle here

You can fix this by triggering change event in click event:
$('#selectAll').click(function(event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
}).change();
} else {
$(':checkbox').each(function() {
this.checked = false;
}).change();
}
});
$(document).ready(function() {
$('#selectAll').click(function(event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
}).change();
} else {
$(':checkbox').each(function() {
this.checked = false;
}).change();
}
});
$('.record_table tr').click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
$("input[type='checkbox']").change(function(e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
.record_table {
width: 100%;
border-collapse: collapse;
}
.record_table tr:hover {
background: #eee;
}
.record_table td {
border: 1px solid #eee;
}
.highlight_row {
background: #eee;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
<tr class="header">
<th>
<input type="checkbox" id="selectAll" />
</th>
<th>Hello</th>
<th>Hello</th>
</tr>
<tr class="selectable">
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
</table>

Working fiddle
You could add class highlight_row and remove it in selectAll click event :
$('#selectAll').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
$(this).closest('tr').addClass('highlight_row');
});
}
else {
$(':checkbox').each(function() {
this.checked = false;
$(this).closest('tr').removeClass('highlight_row');
});
}
});
Hope this helps.
$(document).ready(function () {
$('#selectAll').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
$(this).closest('tr').addClass('highlight_row');
});
}
else {
$(':checkbox').each(function() {
this.checked = false;
$(this).closest('tr').removeClass('highlight_row');
});
}
});
$('.record_table tr').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
.record_table {
width: 100%;
border-collapse: collapse;
}
.record_table tr:hover {
background: #eee;
}
.record_table td {
border: 1px solid #eee;
}
.highlight_row {
background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="record_table" id="table-patient-time">
<tr class="header">
<th>
<input type="checkbox" id= "selectAll" />
</th>
<th>Hello</th>
<th>Hello</th>
</tr>
<tr class="selectable">
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Hello</td>
<td>Hello</td>
</tr>
</table>

I would just trigger change and not have the logic in multiple places
$('#selectAll').click(function(event) {
$(':checkbox').prop("checked",this.checked).change();
});
$("input[type='checkbox']").change(function (e) {
$(this).closest('tr').toggleClass("highlight_row", this.checked);
});
Now what I would do for the html is you should use thead and tbody instead of using a class to say you have a head row.

JsFiddle
Made a small tweak to your working example that dispatches a click event to the checkboxes that need to be changed. This should properly trigger the onchange event for those boxes
The new section looks like this:
if(this.checked) {
// Iterate each checkbox
$(':checkbox').not(":checked").click()
}
else {
$(':checkbox:checked').click()
}

Related

how to show hide tr if td meet the condition in javascript

I want to show/hide tr when all td have same values in current tr.in second tr have 2 same value but i m able to hide/show . it will show hide when all td value same.
$('#contains').change( function() {
$('td:contains("text2")').parent().toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="contains" >contains text2
<br/>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Lastname</th>
</tr>
<tr>
<td>text1</td><td>text2</td><td>text2</td>
</tr>
<tr>
<td>text3</td><td>text4</td><td>text4</td>
</tr>
</table>

with js (ES6):
const
chk_text2 = document.querySelector('#contains')
, tableRows = document.querySelectorAll('#my-table tbody tr')
;
chk_text2.onchange = () =>
{
tableRows.forEach( tr =>
{
tr.classList.toggle('noDisplay', !tr.innerText.includes('text2') && chk_text2.checked)
})
}
table {
border-collapse : collapse;
margin : 2em 1em;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
td,th {
padding : .2em .8em;
border : 1px solid darkblue;
}
thead {
background : aquamarine;
}
.noDisplay {
display : none;
}
<input type="checkbox" id="contains" >contains text2
<br/>
<table id="my-table">
<thead>
<tr>
<th>Name</th><th>Lastname</th><th></th>
</tr>
</thead>
<tbody>
<tr>
<td>text2</td><td>text2</td><td>text2</td>
</tr>
<tr>
<td>text3</td><td>text4</td><td>text4</td>
</tr>
</tbody>
</table>

// handle click
document.querySelector('#contains').addEventListener('click', () => {
// filter items
const rowsToHide = Array.from(document.querySelectorAll('tr')).filter(row => {
// get first content
const content = row.querySelector('td').textContent
// check all items is equal to first element
return Array.from(row.querySelectorAll('td'))
.some(row => row.textContent !== content)
})
// perform action
rowsToHide.forEach(row => { row.style.display = 'none' })
})

Maybe something like this
$('#contains').
change( function()
{
$('tr').each(function()
{
var hiderow=1;
var firsttd = $('td',this)[0];
if(firsttd)
{
var firsttdtext =firsttd.innerHTML;
$('td',this).each(function(index,element)
{
if(index<1)
return;
if(firsttdtext != element.innerHTML)
hiderow=0;
});
if(hiderow==1)
$(this).toggle();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="contains" >Hide same values
<br/>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Lastname</th>
</tr>
<tr>
<td>text2</td><td>text2</td><td>text2</td>
</tr>
<tr>
<td>text3</td><td>text4</td><td>text4</td>
</tr>
<tr>
<td>textxyz</td><td>textxyz</td><td>textxyz</td>
</tr>
</table>

how to highlight row on mouse click?

I have a table with rows of data. I am able to highlight the table when the checkbox is checked. I would like to enable the highlight and enable the checkbox on a mouse click over the table. the problem with my code now is that when I click on the check box its triggers the event for the mouse click to as the check box is part of the <tr> how can I fix this.
$('.form-check-input').on('click', function() {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.attr("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.attr("checked", true);
$(this).addClass("rowColor");
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

Issue with above code is when checkbox clicked it also trigger parent element click event. you can stop that by calling stopPropagation() for event. here is updated code
$('.form-check-input').on('click', function(e) {
e.stopPropagation();
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
$('.form-check-input').trigger("click");
return;
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td>test</td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

You had two events overlap each other because the checkbox click was bubbling to the tr click. I added e.stopPropagation(); to keep it from happening.
$('.form-check-input').on('click', function(e) {
e.stopPropagation();
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.attr("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.attr("checked", true);
$(this).addClass("rowColor");
}
});
table {
width: 100%
}
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr>
<td>&nbsp</td>
<td class="checkboxtd">
<input class="form-check-input" type="checkbox" value="" id="">
</td>
</tr>
</tbody>
</table>

First of all some other this about your code:
you should use checkBox.prop("checked", false); and not .attr to set the current state of the checkbox.
you normally want to listen to the change (or input) event on an input element if you want to get notified about a change a click. A checkbox could also be checked/unchecked by using other input devices like a keyboard.
To your problem, there are different ways of targeting the problem.
My first and highly suggested solution would be to rewrite the logic of your code: I would go with only changing the checked state of the checkbox in the tr event handler and then trigger the change event on the checkbox.
$('.form-check-input').on('change', function(e) {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
var checkBox = $(this).find(".form-check-input");
if (!$(e.target).is(checkBox)) {
// toggle the check state
checkBox.prop("checked", !checkBox.is(':checked'));
// trigger the change event
checkBox.trigger("change")
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
If you really want to keep your code that way - which I won't suggest due to the above-mentioned reason - you could go with the way to prevent the propagation of the event in the click event handler of the input element, that way it won't reach the tr element.
$('.form-check-input').on('click', function(e) {
e.stopPropagation()
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.prop("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.prop("checked", true);
$(this).addClass("rowColor");
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
The other way would be to check in the event handler of the tr element if the click event originated from the input element, using $(e.target).is(checkBox). That way you could also change your event listener to listen for change instead of click for the checkbox. But I wouldn't recommend that either.
$('.form-check-input').on('change', function(e) {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (!$(e.target).is(checkBox)) {
if (checkBox.is(':checked')) {
checkBox.prop("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.prop("checked", true);
$(this).addClass("rowColor");
}
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

I think you can do a few changes feel free to visit my solution in CodePen: https://codepen.io/juanmaescudero/pen/PojQKzm
Anyway I share you the code:
HTML:
<table id="table1" class="table table-striped">
<tbody>
<tr class="">
<td>highlight row</td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
CSS:
.rowColor {
background-color: #dfecf6;
}
JS:
$(".form-check-input").on("click", (e) => {
e = e.target;
if ($(e).is(":checked")) {
$(e.closest("tr")).addClass("rowColor");
} else {
$(e.closest("tr")).removeClass("rowColor");
}
});
Regards 😁

pure javascript checkbox filter row

I have the following codes. checkbox for compare value in table row
Problem:
1 ) when table value same multiple row it will hide all I want to complare 1 checkbox 1 row
2 ) why funtion will start work when checked box ? I want to start function onload window
Fiddle: http://jsfiddle.net/4sx1pdmn/
Can anyone advise with my codes?
function filterCondtn1(event) {
var element = event.target
var condt1 = document.getElementsByClassName("option")
for (var i = 0; i < condt1.length; i++) {
if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
if (element.checked == true) {
condt1[i].parentElement.style = "display:none"
} else {
condt1[i].parentElement.style = "display:block"
}
}
}
}
table {
border-collapse : collapse;
margin : 2em 1em;
}
td,th {
padding : .2em .8em;
border : 1px solid darkblue;
}
<div id="InputOpts">
<input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 1
<input type="checkbox" value="1" oninput="filterCondtn1(event);">Option 2
<input type="checkbox" value="2" oninput="filterCondtn1(event);">Option 3
</div>
<table id="myTable">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
<tr>
<td class="option">2</td>
<td>2</td>
</tr>
<tr>
<td class="option">3</td>
<td>3</td>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
</table>
Sorry for my bad English, can't explain all what I need, hope you understand what I need

You should keep track of your selections with a Set. If you want multiple filters, you could use a Map instead. Add to the set if the option is enabled and remove if it gets disabled.
Use a class to hide the rows that do not meet the filter criteria.
const filterVals = new Set();
const isValid = (value) => filterVals.size === 0 || filterVals.has(value);
const handleInputChange = ({ target: { checked, value } }) => {
if (checked) filterVals.add(value);
else filterVals.delete(value);
updateTableRows();
}
const updateTableRows = () =>
document.querySelectorAll('.option').forEach(option => {
option.closest('tr').classList.toggle('hidden-row', !isValid(option.textContent));
});
document.querySelectorAll('#input-opts input[type="checkbox"]')
.forEach(input => input.addEventListener('input', handleInputChange));
table { border-collapse: collapse; }
table, th, td { border: thin solid grey; }
th, td { padding 0.25em; text-align: center; }
.hidden-row { display: none; }
#input-opts { margin-bottom: 1em; }
#input-opts label { margin-right: 1em; }
<div id="input-opts">
<label>Name 1 <input type="checkbox" value="1" /></label>
<label>Name 2 <input type="checkbox" value="2" /></label>
<label>Name 3 <input type="checkbox" value="3" /></label>
</div>
<table id="my-table">
<thead>
<tr><th>Name</th><th>Country</th></tr>
</thead>
<tbody>
<tr><td class="option">1</td><td>1</td></tr>
<tr><td class="option">2</td><td>2</td></tr>
<tr><td class="option">3</td><td>3</td></tr>
<tr><td class="option">1</td><td>1</td></tr>
</tbody>
</table>

a way to do that
const TD_option =
[...document.querySelectorAll('#myTable td.option')] // make an array
.map(el=>( // of objects { val, el }
{ val : el.textContent.trim().toLowerCase()
, tr : el.closest('tr')
}))
;
document
.querySelectorAll('#InputOpts input[type="checkbox"]')
.forEach( ckbx =>
{
ckbx.checked = true // all are displayed on document load
let chkVal = ckbx.value.toLowerCase()
ckbx.oninput = e =>
{
TD_option.forEach( row =>
{
if (chkVal == row.val )
row.tr.classList.toggle('noDisplay', !ckbx.checked )
})
}
})
table {
border-collapse : collapse;
margin : 2em 1em;
}
td,th {
padding : .2em .8em;
border : 1px solid darkblue;
}
.noDisplay {
display: none;
}
<div id="InputOpts">
<label><input type="checkbox" value="1">Option 1</label>
<label><input type="checkbox" value="2">Option 2</label>
<label><input type="checkbox" value="3">Option 3</label>
</div>
<table id="myTable">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
<tr>
<td class="option">2</td>
<td>2</td>
</tr>
<tr>
<td class="option">3</td>
<td>3</td>
</tr>
<tr>
<td class="option">1</td>
<td>1</td>
</tr>
</table>

How to check and Uncheck checkbox and also how to make the checkbox click out of the row click

Only one row having class highlightRowSelected one time and that row's checkbox is ticked - this is working
How to make other checkboxes deselect which does not have class highlightRowSelected and also other rows checkbox es can be ticked but that should not add class highlightRowSelected to that row , only row click(not from checkbox col) should add the class highlightRowSelected to that row
you can change the function declaration and make a pure js call rather than specifying getdetails(row) in the html..
Also the rows are dynamic so cant hardcode id or something in html
Check out this fiddle: https://jsfiddle.net/y7jqb5hp/13/
function getdetails(row) {
el = window.event.srcElement;
if (el.id.substr(0, 7) == 'eachRow')
el = null;
if (row.cells[0].children[0].checked == false && el != null) {
row.cells[0].children[0].checked = true;
} else if (row.cells[0].children[0].checked == false && el != null) {
row.cells[0].children[0].checked = true;
}
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected {
background-color: #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
<tr onclick="getdetails(this)">
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>

I just changed the second condition of your JS code, added to unselect others:
$('input:checkbox').removeAttr('checked');
And took away the call getdetails from the header row.
Also added:
$('input:checkbox').click(function(e) {
e.stopPropagation();
});
to handle the checkbox ticks separately from row clicks.
function getdetails(row) {
el = window.event.srcElement;
if (el.id.substr(0, 7) == 'eachRow')
el = null;
if (row.cells[0].children[0].checked == false && el != null) {
$('input:checkbox').removeAttr('checked');
row.cells[0].children[0].checked = true;
} else if (row.cells[0].children[0].checked == true && el != null) {
row.cells[0].children[0].checked = false;
}
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
$('input:checkbox').click(function(e) {
e.stopPropagation();
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected {
background-color: #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
<tr>
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>

update your js function:
function getdetails(row) {
if ($(row).find('input[type="checkbox"]').is(":checked")) {
$(row).find('input[type="checkbox"]').prop('checked', false);
$(row).removeClass("highlightRowSelected");
return false;
}
var isChecked = false;
$("#tableID tbody tr").each(function () {
if ($(this).find('input[type="checkbox"]').is(":checked")) {
isChecked = true;
}
});
if (isChecked) {
$(row).find('input[type="checkbox"]').prop('checked', true);
return false;
} else {
$('table input[type="checkbox"]').prop('checked', false);
$(row).find('input[type="checkbox"]').prop('checked', true);
}
$("#tableID tbody tr").each(function () {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
updated fiddle

use jquery to trigger the function,
ex.
<tr id="1" onclick="checkMe(this.id)"><input type='checkbox'></tr>
<tr id="2" onclick="checkMe(this.id)"><input type='checkbox'></tr>
jquery:
function checkMe(id){
$(this).closest('[type=checkbox]').attr('checked', true);
}

Create Simple J Query todo list

I am trying to create a simple todo list in Javascript but for some reason when the check box is ticked, the styling text adjacent to it does not change rather the heading text style changes as per the fiddle
HTML:
<table border="1">
<tr>
<td>
<input type="checkbox" value="None" id="squaredTwo" name="check" />
</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>
<input type="checkbox" value="None" id="squaredTwo" name="check" />
</td>
<td>row 2, cell 2</td>
</tr>
</table>
<h2> Heading 2</h2>
CSS:
.newclass {
text-decoration: line-through;
color: red;
}
JQuery:
$('input[type="checkbox"]').click(function () {
if ( this.checked ) {
//alert('Checked');
$("h2").addClass('newclass');
} else {
//alert('Unchecked');
$("h2").removeClass('newclass');
}
});
Please help

Change your Jquery like this
$('input[type="checkbox"]').click(function () {
if (this.checked) {
//alert('Checked');
$(this).closest("td").next().addClass('newclass');
} else {
//alert('Unchecked');
$(this).closest("td").next().removeClass('newclass');
}
});
Demo Fiddle
Even Simpler than that
$('input[type="checkbox"]').click(function () {
$(this).closest("td").next().toggleClass('newclass');
});
New Demo Fiddle

It is happening as you are targeting H2 element for styles on click of checkbox. Instead use the next TD element.
$('input[type="checkbox"]').click(function() {
if (this.checked) {
//alert('Checked');
$(this).parent().next().addClass('newclass');
} else {
//alert('Unchecked');
$(this).parent().next().removeClass('newclass');
}
});

We Keep Coding

JavaScript is the programming language of the Web.

HTML Row table selection - javascript

Related

how to show hide tr if td meet the condition in javascript

how to highlight row on mouse click?

pure javascript checkbox filter row

How to check and Uncheck checkbox and also how to make the checkbox click out of the row click

Create Simple J Query todo list

Categories

Resources