jquery find() equivalent for javascript

jquery find() equivalent for javascript - javascript

I have three tables and i want to check wheter they contain a specific element, e.g. a button with the value 'Previous'. I solved it by using the jquery function find and writing a function, but i need to solve this problem without jquery. Is this possible?
var t1 = document.getElementById("table_one");
var t2 = document.getElementById("table_two");
var t3 = document.getElementById("table_three");
has_prev_button(t1);
has_prev_button(t2);
has_prev_button(t3);
function has_prev_button(element)
{
var has_prev_button = false;
var check = $(element).find("input[type=button]");
for (i=0; i<=check.length-1; i++) {
if (check[i].getAttribute("value") == "Previous") {
has_prev_button = true;
}
}
if (has_prev_button) {
document.write("<p>The selected table has a Previous button</p>");
} else {
document.write("<strong><p style='color:red'>The selected table has NO Previous button</p></strong>");
}
}
table {
margin-bottom:40px;
border: 1px solid black;
}
td {
border: 2px solid #D8D8D8;
width: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_one">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type="button" value="Previous"></td>
<td><input type="button" value="Next"></td>
</tr>
</table>
<table id="table_two">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td></td>
<td><input type="button" value="Next"></td>
</tr>
</table>
<table id="table_three">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type="button" value="Previous"></td>
<td><input type="button" value="Next"></td>
</tr>
</table>

Use element.querySelectorAll:
var t1 = document.getElementById("table_one");
var t2 = document.getElementById("table_two");
var t3 = document.getElementById("table_three");
has_prev_button(t1);
has_prev_button(t2);
has_prev_button(t3);
function has_prev_button(element)
{
var has_prev_button = false;
var check = element.querySelectorAll("input[type=button]");
for (i=0; i<=check.length-1; i++)
{
if (check[i].value == "Previous")
{
has_prev_button = true;
}
}
if (has_prev_button)
{
document.write("<p>The selected table has a Previous button</p>");
}
else
{
document.write("<strong><p style='color:red'>The selected table has NO Previous button</p></strong>");
}
}
table {
margin-bottom:40px;
border: 1px solid black;
}
td {
border: 2px solid #D8D8D8;
width: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_one">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type="button" value="Previous"></td>
<td><input type="button" value="Next"></td>
</tr>
</table>
<table id="table_two">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td></td>
<td><input type="button" value="Next"></td>
</tr>
</table>
<table id="table_three">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
<tr>
<td><input type="button" value="Previous"></td>
<td><input type="button" value="Next"></td>
</tr>
</table>

Simply use document.querySelectorAll along with the classes spaced apart.
For example, if I want to find the button in the 3rd section and change its background color:
jQuery
$('.my_sections').eq(2).find('.my_button').css('background', 'pink')
Vanilla JS
document.querySelectorAll('.my_sections .my_button')[2].style.background = 'pink'
Similarly, If I wanted to check how many buttons I had of the my_button class:
document.querySelectorAll('.my_sections .my_button').length

Related

Issues with building out a Javascript Calculator

I'm trying to create a simple javascript calculator with divide, multiple, subtract, add, clear, equals, and decimal buttons.
I can't seem to figure out how to add a cell for divide/multiply and decimal.
Any help in trying to resolve this would be greatly appreciated.
function calculate(numEntered) {
if (numEntered == 'C') {
document.getElementById('answer').value = '';
} else if (numEntered == '=') {
document.getElementById('answer').value = eval(document.getElementById('answer').value);
} else {
document.getElementById('answeralue') += numEntered;
}
}
table,
td {
border: 1px solid #000000;
}
td {
cursor: pointer;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="3"><input type="text" id="answer" disabled=""></td>
<td onclick="calculate('C');">C</td>
</tr>
<tr>
<td onclick="calculate(1);">1</td>
<td>2</td>
<td>3</td>
<td onclick="calculate('+')">+</td>
</tr>
<tr>
<td onclick="calculate(4);">4</td>
<td>5</td>
<td>6</td>
<td onclick="calculate('-')" ;>-</td>
</tr>
<tr>
<td onclick="calculate(7);">7</td>
<td>8</td>
<td>9</td>
<td onclick="calculate('=')" ;>=</td>
</tr>
</tbody>
</table>
</body>
</html>

You just need to add a row with the rest of the operators * - multiplication, / - division, and decimal point - .
<tr>
<td onclick="calculate('*');">*</td>
<td onclick="calculate('/');">/</td>
<td onclick="calculate('.');">.</td>
</tr>
EDIT: This of course doesn't check if you've placed the operator in an appropriate place.
There's typo in your js code:
document.getElementById('answeralue') += numEntered; // should be ...('answer').value +=...
Also, be aware that eval may open your project for code injection and is really slow.

If you delegate, it is easier to handle the contents of each cell
I also fixed your error in
document.getElementById('answeralue') += numEntered;
which had the wrong ID and needed a .value
const nums = "1234567890";
const oper = "*/+-.";
const actions = "C";
document.getElementById("calc").addEventListener("click",function(e) {
const char = e.target.textContent;
if (char == 'C') {
document.getElementById('answer').value = '';
return;
}
// if (oper.includes(char)) { // for later
if (char === "=") {
document.getElementById('answer').value = eval(document.getElementById('answer').value);
return
}
else document.getElementById('answer').value += char.trim(); // the trim handles empty cells
});
table,
td {
border: 1px solid #000000;
}
td {
cursor: pointer;
min-width: 30px;
}
<table>
<tbody id="calc">
<tr>
<td colspan="3"><input type="text" id="answer" disabled=""></td>
<td>C</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>=</td>
<td>.</td>
</tr>
</tbody>
</table>

Filter table based on multiple columns' value with multiple buttons

What I am trying to achieve:
I currently got two working buttons with a static value which is Yes.
<button type="button" id="foo_btn" value="Yes" class="btn">Foo</button>
<button type="button" id="bar_btn" value="Yes" class="btn">Bar</button>
When clicked it will filter a table based on the column's value and only show the rows which has the value Yes in that specific column in them.
Currently I use an switch statement to check the id of the button clicked and then set a variable which determines what column to be filtered, but I don't like this approach as if I include several columns/buttons, it will get rather long and messy. Also I don't like working with switch statements.
I also tested the performance of each event in Developer Tools in the Perfomance section and noticed that each task takes over a second to perform. Is there any superior solution to this rather than using switch statements?
Working example of what I've tried but with an ugly approach:
$('#foo_btn, #bar_btn').on('click', function() {
var val = $(this).val().toLowerCase();
switch(this.id) {
case 'foo_btn':
col = 'td:nth-child(1)';
break;
case 'bar_btn':
col = 'td:nth-child(2)';
break;
}
$(col).filter(function() {
$('tr:not(:has(th))').show();
return $(this).text().toLowerCase().indexOf(val);
}).parent().hide();
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="foo_btn" value="Yes" class="btn">Foo</button>
<button type="button" id="bar_btn" value="Yes" class="btn">Bar</button>
<table class="table">
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
<tr>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
Comment
I feel like this is a really simple solution to a simple problem which I've just gotten my brain tangled in. I appreciate all help I can get.

Based on the working example in your question you could make use of the html data property and bake the desired column right into the button itself.
e.g.
<button type="button" id="foo_btn" value="Yes" data-column="1" class="btn">Foo</button>
and inside the click event listener's callback function you can get the value of data-colum using
col = 'td:nth-child(' + $(this).data('column') + ')';
Here's the complete example:
$('#foo_btn, #bar_btn').on('click', function() {
var val = $(this).val().toLowerCase();
col = 'td:nth-child(' + $(this).data('column') + ')';
$(col).filter(function() {
$('tr:not(:has(th))').show();
return $(this).text().toLowerCase().indexOf(val);
}).parent().hide();
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="foo_btn" value="Yes" data-column="1" class="btn">Foo</button>
<button type="button" id="bar_btn" value="Yes" data-column="2" class="btn">Bar</button>
<table class="table">
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
<tr>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>

may be this solution would fit for you?
function getColumnIndex(colName) {
var headerCell = $('.table tr:first-child() > th:contains(' + colName + ')')
return headerCell.length ? (headerCell.index() + 1) : -1
}
function showOnlyValues(columnName, valueToShow) {
var colIndex = getColumnIndex(columnName)
$('td:nth-child(' + colIndex + ')').filter(function() {
$('tr:not(:has(th))').show();
return $(this).text().toLowerCase().indexOf(valueToShow);
}).parent().hide();
}
$('.filterBtn').on('click', function() {
var clickedBtn = $(this);
showOnlyValues(clickedBtn.data('columnName'), clickedBtn.val().toLowerCase());
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" value="Yes" class="btn filterBtn" data-column-name="Foo">Foo</button>
<button type="button" value="Yes" class="btn filterBtn" data-column-name="Bar">Bar</button>
<table class="table">
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
<td>No</td>
</tr>
</table>

How to clone the Highlighted Row of one table to another Table by pressing Enter key

I have an HTML <table> with data. Upon clicking the table rows, I can add the clicked row to another table. But I want to highlight the row with arrow keys and, on pressing the Enter key on the highlighted row, add the data of the highlighted row to the new table.
How can I do that?
What I have tried so far:
$(document).ready(function(){
$('#myTable').focus();
});
function highlight(tableIndex) {
if ((tableIndex + 1) > $('#myTable tbody tr').length) //restart process
tableIndex = 0;
if ($('#myTable tbody tr:eq(' + tableIndex + ')').length > 0) {
$('#myTable tbody tr').removeClass('highlight');
$('#myTable tbody tr:eq(' + tableIndex + ')').addClass('highlight');
}
}
$('#goto_first').click(function() {
highlight(0);
});
$('#goto_prev').click(function() {
highlight($('#myTable tbody tr.highlight').index() - 1);
});
$('#goto_next').click(function() {
highlight($('#myTable tbody tr.highlight').index() + 1);
});
$('#goto_last').click(function() {
highlight($('#myTable tbody tr:last').index());
});
$(document).keydown(function(e) {
switch (e.which) {
case 38:
$('#goto_prev').trigger('click');
break;
case 40:
$('#goto_next').trigger('click');
break;
}
});
$(document).ready(function() {
var items = [];
$("#myTable tr").on('click', function(e) {
var newTr = $(this).closest("tr").clone();
items.push(newTr);
newTr.appendTo($("#cloneTable"));
});
})
<html><head><title>dynamictable</title>
<style>
table { cursor: pointer; }
.highlight { background-color: lightgreen; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable" border="1px" style="width: 30%;">
<thead>
<tr>
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aaa</td>
<td>aa1</td>
<td>aa</td>
<td>111</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>aa1</td>
<td>aa</td>
<td>111</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<input type="button" id="goto_first" value="first" class="btn btn-success">
<input type="button" id="goto_prev" value="prev" class="btn btn-secondary">
<input type="button" id="goto_next" value="next" class="btn btn-secondary">
<input type="button" id="goto_last" value="last" class="btn btn-success">
<br>
<br>
<br>
<table id="cloneTable" border="1px" style="width: 30%; float :left;"><!--new table to clone data-->
<thead>
<tr>
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Here you go
// highlight first row default
$("#myTable tbody tr:first-child").addClass("highlight");
document.onkeydown = moveAndAdd;
function moveAndAdd(e) {
e = e || window.event;
if (e.keyCode == "38") {
// up arrow
activeRow = $("tr.highlight"); /* get highlighted row */
activeRow.focus();
prevRow = activeRow.prev('tr'); /*very previous siblings*/
if (prevRow.length>0) {
activeRow.removeClass("highlight"); /*remove highlight from active class */
prevRow.addClass("highlight"); /* make very prev row highlighted*/
}
} else if (e.keyCode == "40") {
// down arrow
activeRow = $("tr.highlight"); /* get highlighted row */
activeRow.focus();
nextRow = activeRow.next('tr'); /*very previous siblings*/
if (nextRow.length>0) {
activeRow.removeClass("highlight");
nextRow.addClass("highlight");
}
}
else if (e.which == 13 || e.which == 32) {
// Enter or Spacebar - edit cell
e.preventDefault();
cloneRow = $(".highlight").clone(true); /*clone highlighted row*/
$("#cloneTable").append(cloneRow.removeClass("highlight")); /*append cloned row but remove class */
}
}
table {
color:black;
background-color:white;
}
.highlight{
color:White;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1px" style="width: 30%;">
<thead>
<tr >
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>aaa</td>
<td>aa1</td>
<td>aa</td>
<td>111</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>bb2</td>
<td>bb</td>
<td>222</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>cc3</td>
<td>cc</td>
<td>333</td>
</tr>
<tr>
<td>4</td>
<td>ddd</td>
<td>dd1</td>
<td>dd</td>
<td>444</td>
</tr>
</tbody>
</table>
<table id="cloneTable" border="1px" style="width: 30%; float :left;">
<thead>
<tr>
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

I was going to write a custom response but check this out, it addresses your issue: Use arrow keys to navigate an HTML table
You're also missing a closing quotation mark around your "width: 30%" for your opening parent div

Nth child in table not working Javascript

The td:nth-child('n') is not working over in my table it gives null in the log Where as it is working when i use children[n] it is a simple function for searching
I couldn't find the reason why it is giving out a null.. Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table Searching</title>
<style>
th{
font-weight: bolder;
}
table, th, td{
font-size: 20px;
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<input type="text" name="search">
<button class="s" onclick="Search()">Search by Name</button>
<button class="s" onclick="Search()">Search by Country</button>
<button class="s" onclick="Search()">Search by Pet</button>
<table>
<tr>
<th>Name</th>
<th>Country</th>
<th>Pet</th>
</tr>
<tr>
<td>Abhi</td>
<td>Canada</td>
<td>koala</td>
</tr>
<tr>
<td>Riya</td>
<td>France</td>
<td>Parrot</td>
</tr>
<tr>
<td>Sid</td>
<td>UK</td>
<td>Pig</td>
</tr>
<tr>
<td>Kritika</td>
<td>Germany</td>
<td>Cat</td>
</tr>
<tr>
<td>Kartik</td>
<td>China</td>
<td>Frog</td>
</tr>
<tr>
<td>Radhika</td>
<td>India</td>
<td>Dog</td>
</tr>
</table>
<script>
var input=document.getElementsByName("search")[0];
var s=document.getElementsByClassName("s");
var n=0;
function Search(){
for (var j=0; j<s.length; j++)
{
console.log("element");
console.log(s[j]);
console.log("target");
console.log(event.target);
if(s[j]==event.target){
n=j;
console.log(n);
}
}
var val= input.value;
var a=document.querySelectorAll("table > tbody > tr");
console.log(a);
for(var i =0; i<a.length; i++)
{
var d = a[i].querySelector('td:nth-child("+n+")');
console.log(d);
if(d.innerHTML.toLowerCase()==val.toLowerCase()){
a[i].style.display="";
}
else
{
a[i].style.display="none";
}
}
}
</script>
</body>
</html>

Here are the three reasons why you are giving out null in your code:
First, as stated by Satpal, this code 'td:nth-child("+n+")' will not replace n by its value. It's like writing td:nth-child("+n+") in css.
The solution for this is to write: 'td:nth-child(' + n + ')'. You then concatenate the value of n with the rest of the string
The value of n is an index in a array, so it starts at 0 and ends at array.length - 1. The problem is that the nth-child selector actually selects the nth-child (brilliant naming), so if n is 0 (in the case of searching by name), you'll try to select the 0th-child, wihich doesn't exist... You then have to write: 'td:nth-child(' + (n + 1) + ')' or change the definition of n
You have no <tbody> tag in your HTML. Which means that all the content of the table will be wrapped in a tbody and your selector document.querySelectorAll("table > tbody > tr")will also selects the header of your table. To avoid that, change your HTML accordingly.
Something like that:
<table>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Pet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abhi</td>
<td>Canada</td>
<td>koala</td>
</tr>
<tr>
<td>Riya</td>
<td>France</td>
<td>Parrot</td>
</tr>
<tr>
<td>Sid</td>
<td>UK</td>
<td>Pig</td>
</tr>
<tr>
<td>Kritika</td>
<td>Germany</td>
<td>Cat</td>
</tr>
<tr>
<td>Kartik</td>
<td>China</td>
<td>Frog</td>
</tr>
<tr>
<td>Radhika</td>
<td>India</td>
<td>Dog</td>
</tr>
</tbody>
</table>
Here is a jsfiddle where the search works fine: https://jsfiddle.net/n23685b6/1/
Hope this helps!

scrollToNthChild = (): * => {
var tableBody = document.getElementById('event-table-body');
var tableRows = tableBody.getElementsByTagName('tr');
let targetElement = tableRows[7];
targetElement.scrollIntoView();
}

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);
}

We Keep Coding

JavaScript is the programming language of the Web.

jquery find() equivalent for javascript - javascript

Related

Issues with building out a Javascript Calculator

Filter table based on multiple columns' value with multiple buttons

How to clone the Highlighted Row of one table to another Table by pressing Enter key

Nth child in table not working Javascript

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

Categories

Resources