Develop Reference

Find Checkbox in HTML Table Using JQuery Find Method

I have a HTML table which has the following structure:
<table id="myTable">
<tr>
<td><input type="text" name="FullName" value="Tom" /></td>
<td><input type="checkbox" name="isActive" /></td>
<td>Edit
</tr>
</table>
When the user clicks the 'edit' link, a Javascript function is called (see below). In this function I need to get the data from the table, i.e., FullName and whether or not isActive has been checked.
$("#namedTutors").on('click', '.editTutor', function () {
var tr = $(this).closest("tr");
var fullName = tr.find("input[name=FullName]").val();
});
I can get the FullName easy enough, but I'm having difficulties retrieving the data to see if isActive has been checked/ticked or not.
Could someone please help.
Thanks.

You could select the ckeckbox input by name [name=isActive] then use the .is(':checked') to check whether the ckeckbox is checked or not, like:
$("#namedTutors").on('click', '.editTutor', function() {
var tr = $(this).closest("tr");
var fullName = tr.find("input[name=FullName]").val();
var isActive = tr.find("input[name=isActive]").is(':checked');
console.log( isActive );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="namedTutors">
<tr>
<td><input type="text" name="FullName" value="Tom" /></td>
<td><input type="checkbox" name="isActive" /></td>
<td>Edit
</tr>
</table>

if(tr.find('input[name="isActive"]:checked').length) {
console.log('it is checked');
}

Duplicate all Column Cell Input Values with first Column Cell input value

I have an html table that is wrapped by a form with each cell having an input element in it.
I was wondering if there is a way to obtain the first cell's input value of a particular column and pasting that value in the rest of the cells in that column. In other words, the user will type into the input field of first cell and then click on button to duplicate that entry into the rest of the cells of that column.

Assuming you have a table with a button on each row, give the button a class so that it can have an event assigned:
<button type='button' class='copybtn'>copy</button>
don't use IDs as you need multiple buttons;
$(".copybtn").click(function() {
You can get the button's column using var col = $(this).closest("td").index() (add 1 as .index() is 0-based, but we need 1-based :nth-child).
Get the column cells using:
var cells = $("table").find("tr > td:nth-child(" + col + ")");
Various ways to handle this - eg get all the cells as above, then get the first for the input and last for the button or get the input from the first row's nth-child (as in the snippet)
To get the value: var val = inp.val()
To copy the values, depends on your HTML, you could give each destination cell a class then:
cells.find("td.dest").text(val);
or you can get all cells and exclude first/last:
tbl.find("tr:not(:first):not(:last) > td:nth-child(" + col + ")").text(val);
Altogether:
$(".copybtn").click(function() {
// get 0-based column index
var col = $(this).closest("td").index() + 1;
var tbl = $(this).closest("table");
var val = tbl.find("tr:first td:nth-child(" + col + ")").find("input").val();
tbl.find("tr:not(:first):not(:last) > td:nth-child(" + col + ")").text(val);
});
input {
width: 50px;
}
td {
min-width: 20px;
border: 1px solid #CCC;
margin: 0;
padding: 5px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='t'>
<tbody>
<tr>
<td><input type='text' class='inp' /></td>
<td><input type='text' class='inp' /></td>
<td><input type='text' class='inp' /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button type='button' class='copybtn'>copy</button></td>
<td><button type='button' class='copybtn'>copy</button></td>
<td><button type='button' class='copybtn'>copy</button></td>
</tr>
</tbody>
</table>

If I understand correctly, you'll need something like this:
const copy=(id) => {
var value = document.getElementById("col"+id+"-input").value
var list = document.getElementsByClassName("col"+id+"-input")
for (i = 0; i < list.length; i++)
list[i].value = value
}
document.getElementById("col1-button").addEventListener("click", ()=>copy(1))
document.getElementById("col2-button").addEventListener("click", ()=>copy(2))
document.getElementById("col3-button").addEventListener("click", ()=>copy(3))
<table>
<tr>
<td><input id="col1-input" class="col1-input"><button id="col1-button">OK</button><br>
<td><input class="col1-input"></td>
<td><input class="col1-input"></td>
<td><input class="col1-input"></td>
<td><input class="col1-input"></td>
</tr>
<tr>
<td><input id="col2-input" class="col2-input"><button id="col2-button">OK</button><br>
<td><input class="col2-input"></td>
<td><input class="col2-input"></td>
<td><input class="col2-input"></td>
<td><input class="col2-input"></td>
</tr>
<tr>
<td><input id="col3-input" class="col3-input"><button id="col3-button">OK</button><br>
<td><input class="col3-input"></td>
<td><input class="col3-input"></td>
<td><input class="col3-input"></td>
<td><input class="col3-input"></td>
</tr>
</table>

Try this... JQuery solution.
Good luck!
$(function() {
$('button').on('click', function() {
var inputVal = $(this).prev().val();
// Plus one because arrays start at zero
var colIndex = $(this).parent().parent().children().index($(this).parent()) + 1;
$('table tr td:nth-child('+colIndex+')').not(':first')
.html(inputVal);
});
});
body { margin: 10px; }
table { max-width: 600px; }
td { min-width: 280px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<table class="table table-bordered">
<tr>
<td><input type="text"><button type="button">Copy</button></td>
<td><input type="text"><button type="button">Copy</button></td>
<td><input type="text"><button type="button">Copy</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>

How to check if all textboxes in a row are filled using jquery

I have 3 textboxes in each row. At least one of the rows should be filled completely. All the textboxes in any of the rows should not be empty. I have tried below code, it's for the first row only.
var filledtextboxes= $(".setup_series_form tr:first input:text").filter(function () {
return $.trim($(this).val()) != '';
}).length;
We want to get the maximum number of non-empty textboxes in any row, TIA.

Loop through all the rows. In each row, get the number of filled boxes. If this is higher than the previous maximum, replace the maximum with this count.
var maxboxes = -1;
var maxrow;
$(".setup_series_form tr").each(function(i) {
var filledtextboxes = $(this).find("input:text").filter(function () {
return $.trim($(this).val()) != '';
}).length;
if (filledtextboxes > maxboxes) {
maxboxes = filledtextboxes;
maxrow = i;
}
});

You are targeting only first tr here $(".setup_series_form tr:first input:text") so you will not get the expected output.
You have to iterate with every row(tr) inside form and then find the count of
text field having not empty values and store in a maxCount variable by comparing it previous tr count.
Here is a working snippet:
$(document).ready(function() {
var maxCountInRow =0;
var rowNumber;
$(".setup_series_form tr").each(function(index){
var filledtextboxes= $(this).find("input:text").filter(function () {
return $.trim($(this).val()) != '';
}).length;
if(filledtextboxes>maxCountInRow){
maxCountInRow=filledtextboxes;
rowNumber=index;
}
});
console.log("Row Number:"+rowNumber+" having maxCount: "+maxCountInRow);
});
.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;}
.registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;}
.registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;}
label.error{color: red !important;}
.err-fields{background-color:red;color: white !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="setup_series_form">
<div>
<table class="registrant_table">
<tr class="title">
<td>No</td>
<td>Official Full Name</td>
<td>Mobile Contact</td>
<td>Email</td>
</tr>
<tr class="in-fields">
<td>1</td>
<td><input type="text" value="sas" name="firstname[]"></td>
<td><input type="text" value="" name="phone[]"></td>
<td><input type="text" value="" name="email[]"></td>
</tr>
<tr class="in-fields">
<td>2</td>
<td><input type="text" value="sas" name="firstname[]"></td>
<td><input type="text" value="sas" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
<tr class="in-fields">
<td>3</td>
<td><input type="text" name="firstname[]"></td>
<td><input type="text" name="phone[]"></td>
<td><input type="text" name="email[]"></td>
</tr>
</table>
</div>
</form>

Obtain location of input within table cell HTML

I have a a table with inputs inside each table cell like so:
<table width="300" border="1" align="center" id="mainTable">
<tr>
<td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
<td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
<td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
<td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
</tr>
</table>
I would like to know how to obtain the location (row and column) of an input within the table (using javascript). I know how to do it for a regular cell with nothing inside, but for an input within the cell I can't seem to find a way. The function inside the input is for another purpose.

Modify the call to the function insertToArray(value) to insertToArray(this) and then inside the function do
function insertToArray(elem){
...
var tdElem = elem.parentNode;
var trElem = tdElem.parentNode;
console.log("Row: " + trElem.rowIndex);
console.log("Column: " + tdElem.cellIndex);
...
}

If you are able to get a reference to the table cell, then you just have to get access to the children inside of that node.
You can use `childNodes' which returns a NodeList object and then you use the index to access the children so in your case, the input box.
example:
document.getElementById("firstTableCell").childNodes[0].value;

I adopted the following approach, though it uses the keyup listener from jquery:
HTML:
<table width="300" border="1" align="center" id="mainTable">
<tr>
<td><input size="1" maxlength="1" /></td>
<td><input size="1" maxlength="1" /></td>
<td><input size="1" maxlength="1" /></td>
<td><input size="1" maxlength="1" /></td>
</tr>
<tr>
<td><input size="1" maxlength="1" /></td>
<td><input size="1" maxlength="1" /></td>
<td><input size="1" maxlength="1" /></td>
<td><input size="1" maxlength="1" /></td>
</tr>
</table>
JS:
$("#mainTable input").keyup(function() {
var colIndex = $(this).parent()[0].cellIndex;
var rowIndex = $(this).parent()[0].parentElement.rowIndex;
})
Hope this helps!

It can be done in different ways, the code I included here is just to help you understand it better and depending on what you want to do, this is a nice easy approach to your issue. You can get the indexes instead, again, it depends on what you want to do.
HTML:
<table width="300" border="1" align="center" id="mainTable">
<tr class="row1">
<td><input class="tableCell" id="cell1" size="1" maxlength="1" /></td>
<td><input class="tableCell" id="cell2" size="1" maxlength="1" /></td>
<td><input class="tableCell" id="cell3" size="1" maxlength="1" /></td>
<td><input class="tableCell" id="cell4" size="1" maxlength="1" /></td>
</tr>
</table>
JS
window.onload = function() {
var cells = document.getElementsByClassName("tableCell");
for (var x = 0; x < cells.length; x++) {
cells[x].addEventListener("keyup", function(e) {
// get row class name:
var rowClass = (e.target).parentElement.parentElement.className;
alert("Row classname: " + rowClass);
// get the value insede the cell:
var cellValue = (e.target).value;
alert("Value entered: " + cellValue);
var cellId = e.target.id;
alert("Cell ID: " + cellId);
});
}

You could use a utility method that to looks for the closest parent
using a tag name:
Here's an example
function getClosestParent( needle, haystack ) {
var parent = null;
var target = needle.toUpperCase();
var element = haystack.parentElement;
while ( parent == null ) {
if ( element !== null ) {
if ( element.tagName === target ) {
parent = element;
}
}
else {
break;
}
element = element.parentElement;
}
return parent;
}
document.querySelector("input").addEventListener("click", function() {
var row = getClosestParent("tr", this)
var column = getClosestParent("td", this)
alert(row);
alert(column);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="300" border="1" align="center" id="mainTable">
<tr>
<td><input onkeyup="insertToArray(value)" size="1" maxlength="1" /></td>
</tr>
</table>

I've figured out a great way to do it.
I have 2 global variables representing the column and the row objects (tr, td)
function returnParent(x)
{
parentOfInput = x.parentNode; //td level
parentOfTd = parentOfInput.parentNode; //tr level
}
And I call this function alongside the other as well like so (note that I call returnParent() first since I want the position first thing when I enter something in input):
<table width="300" border="1" align="center" id="mainTable">
<tr>
<td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
<td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
<td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
<td><input onkeyup="returnParent(this); insertToArray(value);" size="1" maxlength="1" /></td>
Finally in my insertToArray(value) function, I get the column and row like so:
function insertToArray(value)
{
var a = value;
//get the cell position using parentNode
tableCol = parentOfInput.cellIndex;
tableRow = parentOfTd.rowIndex;
}

jquery keyup, keydown doesn't work in table with multiple row

I have a table which has 200 rows. Jquery keyup or keydown are not working. My jquery code is :
$('.upd_tab tbody tr td:eq(2) input').on('keyup',function(e){
if (e.which==13)
$(this).parent().parent().find('td').eq($(this).parent().index()+1).find('input').focus();
});
Actually I want to focus or go to the input box which is located in next td. This works with 1st tr but not in rest 199 trs
Here is the HTML.
<tbody>
<tr id="chz1">
<td><input maxlength="16"/><div class="bx"></div></td>
<td><input/><div class="bx"></div></td>
<td><input maxlength="6"/><div class="bx"></div></td>
<td><input /></td>
<td><input /></td>
<td><input value="1"/><div class="bx"><button class="sbut"></button></div><input type="hidden" class="hinp"/></td>
<td><input /></td>
<td><div class="bx"></div></td>
<td><div class="bx"></div></td>
</tr>
<tr id="chz2">
<td><input maxlength="16"/><div class="bx"></div></td>
<td><input/><div class="bx"></div></td>
<td><input maxlength="6"/><div class="bx"></div></td>
<td><input /></td>
<td><input /></td>
<td><input value="1"/><div class="bx"><button class="sbut"></button></div><input type="hidden" class="hinp"/></td>
<td><input /></td>
<td><div class="bx"></div></td>
<td><div class="bx"></div></td>
</tr>
<!-- etc -->
</tbody>

Try this one:
$('.upd_tab input').on('keyup',function(e){
e = e || window.event;
var code = e.keyCode;
if (code == '13') {
$(this).closest('td').next().find('input').focus();
}
});

The problem you are having is that :eq(n) selects the nth element from the previous selection. That is, the collection of all td's that are a child of a tr of a tbody of an element with the upd_tab class. It behaves basically like this: $($('.upd_tab tbody tr td')[2]) (and the input below that element). If you would use :eq(10) it would select the input box on the second row.
What you want is :nth-child(3).
$('.upd_tab tbody tr td:nth-child(3) input').on('keyup',function(e){
if (e.which==13)
$(this).parent().parent().find('td').eq($(this).parent().index()+1).find('input').focus();
});
For an easier understanding what elements are being selected, consider colouring them, for example with .css( { 'background': 'blue' } );. This will give you a visual clue what is happening.