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

Insert HTML table row clone at index without jquery

I am attempting to insert a row at the index of the addmorebutton td row.
First attempt indeed adds a row at the desired index however not as I would have expected, simply as space vs actually adding a bounded row column box.
How do I insert a new row at the clicked index of td that is empty and is indeed apart of the table?
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('Table').deleteRow(i);
}
function addRow() {
var i = row.parentNode.parentNode.rowIndex;
document.getElementByID('Table').insertRow(i);
}
turkSetAssignmentID();
<script type='text/javascript' src='https://s3.amazonaws.com/mturk-public/externalHIT_v1.js'></script>
<form name='mturk_form' method='post' id='mturk_form' action='https://www.mturk.com/mturk/externalSubmit'>
<input type='hidden' value='' name='assignmentId' id='assignmentId' />
<h1>This is a test</h1>
<div id="tablediv">
<input type="button" id="addbutton" value="Add Index" /><br/><br/>
<table id="Table" border="1">
<tr>
<td>Index</td>
<td>Measured Depth</td>
<td>Inclination</td>
<td>Azimuth</td>
<td>Delete?</td>
<td>Add Row?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="Measured Depth" contenteditable='true'></td>
<td><input size=25 type="text" id="Inclination" contenteditable='true'></td>
<td><input size=25 type="text" id="Azimuth" contenteditable='true'></td>
<td><input type="button" id="delbutton" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addmorebutton" value="Add More Indexs" onclick="addRow.apply(this)" /></td>
</tr>
</table>
</div>
<p><input type='submit' id='submitButton' value='Submit' /></p>
</form>

You could try to add the respective cells to new row, saving the row on a var and the with the appendChild() function. Something like this:
function addRow(row) {
var i = row.parentNode.parentNode.rowIndex + 1;
var nextRow = document.getElementById('Table').insertRow(i);
// Start iterating over all the cells on the row
var cell = nextRow.insertCell(0);
cell.appendChild(document.createTextNode(i));
cell = nextRow.insertCell();
cell = nextRow.insertCell();
cell = nextRow.insertCell();
cell = nextRow.insertCell();
cell = nextRow.insertCell();
input = document.createElement("Input");
input.type = "button";
input.setAttribute("onclick", "addRow(this)");
input.value = "Add More Indexs"
cell.appendChild(input);
}
And of course append on each cell the respective input.
Then maybe you would like to add a function to increase the index number of the rows under the new one...
Also I changed the onclick value on the original button to addRow(this).

Get value of class with dynamic id jquery

I have the table bellow and I want to get the input $('.note') value from the id of the previous input :
<tr>
<td><input type="text" id='student_1' class='student'></td>
<td><input type="text" class='note'></td>
</tr>
<tr>
<td><input type="text" id='student_2' class='student'></td>
<td><input type="text" class='note'></td>
</tr>
So it can be something like that :
$(".student").change(function () {
alert(this.id.parent('td input.note').val())
})

You could use this.value or $(this).val() :
$('.classname').on('click',function(){
console.log(this.value, $(this).val(), this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='classname' id="id_1" value='value_1'/>
<input type='text' class='classname' id="id_2" value='value_2'/>
<input type='text' class='classname' id="id_3" value='value_3'/>
<input type='text' class='classname' id="id_4" value='value_4'/>
Edit :
Go up to the parent tr using .closest('tr') then search for the related input note using .find('.note') and get the value :
$(".student").on('input', function () {
console.log( $(this).closest('tr').find('.note').val() );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" id='student_1' class='student'></td>
<td><input type="text" class='note' value="1111"></td>
</tr>
<tr>
<td><input type="text" id='student_2' class='student'></td>
<td><input type="text" class='note' value="2222"></td>
</tr>
</table>

You can use a combination of closest and find.
$(".student").on('change', function () {
// the student input to which the change event is bound
var $this = $(this);
// Get the wrapper in which the inputs are present
var $closestTr = $this.closest('tr');
// the input vale that is needed
alert($closestTr.find('.note').val());
});

Yes, you can do this $('#' + this.id).val()
You don't need to include the class in the selector because IDs are unique.

Delete button is not working

Html Table:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>Name</td>
<td>Location</td>
<td>From</td>
<td>To</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td><input type="text" placeholder="who" name="who" /></td>
<td><input type="text" placeholder="location" name="location" /></td>
<td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"/></td>
<td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"/></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add"/></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
</table><!-- /table#table-data -->
Javascript:
$("input.tr_clone_add").live('click', function() {
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
});
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table-data").deleteRow(i);
}
Here is my fiddle:
http://jsfiddle.net/tejdeep/b6A9R/
This code is cloning first two cells of a table row. I have add and delete button for every row.
I want this as like this:
http://jsfiddle.net/nKkhW/5/
Add button wants to be there for the cloning row and delete button should be there for the cloned row.
I want to include the functionality while cloning first two cell values has to come to the cloned row?
Let me know if you have doubts in this question.

What I have understood by your question, on that basis I have created Fiddle. Hope it will help you,except the default value case.
Updated fiddle
To delete row, you can try:
var $actualrow = $(this).closest('.tr_clone');
$actualrow.remove();

<input type="button" value="Delete" onclick="deleteRow(this)"/>
The problem is, where is your deleteRow() ? it's not in your fiddle..
fixed : http://jsfiddle.net/b6A9R/5/
and you have to change onLoad to No wrap, otherwise your function will not work.

Here is the updated code for onLoad.
JS
$(document).on('click','input[value="Delete"]',function(){
deleteRow(this);
});
DEMO

Dynamically changing the Tab Index for the textbox

I have a requirement to accomplish to change the tab index of the cursor based on how the user wishes to perform. I am not sure what is the best way to achieve this. I have created a fiddle to ensure what is explained here is understood by all.
The requirement is the following:
There is a table with a series of text box on all the rows and columns.
A radio button is provided below the table for the user to be able to move through the text boxes on the table.
Selecting "Move Horizontally" will make the cursor move from each textbox horizontally when a tab is pressed or the max length is reached.
Selection "Move Vertically" will make the cursor move from each textbox vertically when a tab is pressed or the max length is reached.
By default the tab indexes move vertically.
When reaching the last textbox on either the row on the column, the cursor should automatically move to the next row or columns first textbox.
How can I achieve this dynamically when selecting the radio buttons.
JS Fiddle: http://jsfiddle.net/2uzfT/4/embedded/result/

Your Complete Solution :)
HTML
<table border="1" id="mytable">
<thead>
<tr>
<th> Description </th>
<th> Column1 </th>
<th> Column2 </th>
<th> Column3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Stephen </td>
<td><input type="text">
</td>
<td><input type="text">
</td>
<td><input type="text">
</td>
</tr>
<tr>
<td> Malcom </td>
<td><input type="text">
</td>
<td><input type="text">
</td>
<td><input type="text">
</td>
</tr>
<tr>
<td> Judith </td>
<td><input type="text">
</td>
<td><input type="text">
</td>
<td><input type="text">
</td>
</tr>
</tbody>
</table>
<br>
<br>
<INPUT TYPE=RADIO NAME="selection" VALUE="V">
Move Verically<BR>
<INPUT TYPE=RADIO NAME="selection" VALUE="H">
Move Horizontally<BR>
jQuery
$(function() {
var inputBox = $('#mytable input[type="text"]').length;
var row = $('#mytable tbody tr').length;
var column = $('#mytable tbody tr:first td').length;
// Vertical
$('input:radio').change(function() {
var self = $(this);
if(self.val() == "V") {
var counter = 1;
for(i=1; i<column; i++) {
for(j=2; j<=row+1; j++) {
$('#mytable tbody tr td:nth-child('+j+')').find('input[type="text"]').attr('tabindex', counter);
counter++;
}
}
}
else {
$('#mytable input[type="text"]').removeAttr('tabindex');
}
});
});

A rough idea is below by jQuery:
// For columns
var textBoxes = $('#tableid input[type="textbox"]').length;
var rowNums = 4;
for(i=0; i<=textBoxes; i++) {
for(j=0; j<=rowNums; j++) {
$('#tableid').find('tr:eq('+j+') input[type="textbox"]').attr('tabindex', i);
}
}
Row indexing can be done also same as above