Develop Reference

How to get the value of input type text from the last row of a table

I have a table in my page and i have input type text in each row, one of them is for srno
I want to get the value of srno text box from the last row of the table using JavaScript.
Here's a code snippet with my HTML:
<table id="vattable" class="table table-sm table-striped">
<thead class="thead-light">
<tr>
<th style="width:50px">SRNo</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="text-control input-sm" readonly name="srno[]" id="srno" value=1 style="text-align:right;max-width:40px;" maxlength="13" /></td>
</tr>
</tbody>
</table>
Actually I am adding rows on button click event in JavaScript, I want to get the last value of srno column and give the next srno with +1 each time the row is created in the table. when the page is loaded I am selecting data from database and fetching in this table so sometime this table may have few rows already and when I click button to create row it should take the last srno and add +1 to the new row srno.

I think that this should work for you if you have a similar HTML structure.
What it basically does is:
Scanning the table structure for all inputs with name=srno.
Getting the last input and logging in the javascript console.
You can get its value with lastInput.value.
function getLastInput() {
//get all inputs with name srno in an array
const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
//get the last input from the array by referring the highest index of the array
const lastInput = allInputs[allInputs.length - 1];
return lastInput;
}
$(document).ready(function() {
var rowcnt = $('#vattable tr').length;
var count = rowcnt;
$(document).on('click', '#addrow', function() {
count = count + 1;
var html_code = '';
html_code += '<tr id="row_id_' + count + '">';
html_code += '<td><input type="text" class="text-control input-sm" name="srno[]" id="srno" readonly style="text-align:right;width:40px" value="' + count + '"/></td>';
html_code += '</tr>';
$('#vattable').append(html_code);
console.log(getLastInput());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="vattable">
<tr>
<td>
<input type="text" name="srno[]" value="1" />
</td>
</tr>
<tr>
<td>
<input type="text" name="srno[]" value="2" />
</td>
</tr>
<tr>
<td>
<input type="text" name="srno[]" value="3" />
</td>
</tr>
<tr>
<td>
<input type="text" name="srno[]" value="4" />
</td>
</tr>
</table>
<button id="addrow">Add row</button>
EDIT:
Use this if your input name is srno[].
//get all inputs with name srno[] in an array
const allInputs = document.querySelectorAll('table tr input[name="srno[]"]');
//get the last input from the array by referring the highest index of the array
const lastInput = allInputs[allInputs.length - 1];
console.log(lastInput);

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).

Javascript add Row, one function for different tables

I have a few tables like this
<table id="table_1">
<tr>
<td><input type="text" name="date[]"</td>
</tr>
</table>
the number of the <td>'s is very variable.
Currently I'm using a function like this:
function addRow(){
var table = document.getElementById('table_1');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0)
....
cell1.innerHTML="<input type='text' name='date[]' />
}
using this method, it would require a custom function for every type of table.
Is there a way, to add a Line to a table, which is exactly the same as the last row?
In a table with 7 cells, 7 cells would be added, with the right content.
Is this possible in pure JS?

You could do it this way with jQuery:
Edit:
Sorry, I did not see you wanted pure JS.
jQuery
$('button').click(function(){
var table = $(this).prev('table');
var lastrow = $('tr:last-child', table).html();
table.append('<tr>' + lastrow + '</tr>');
});
HTML
<table>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<button>Add a row</button>
<table>
<tr>
<th>Meal</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<button>Add a row</button>
JS Fiddle Demo

Maybe this is what you need : http://jsfiddle.net/thecbuilder/bx326s31/1/
<input type="button" onclick="cloneRow()" value="Clone Row" />
<input type="button" onclick="createRow()" value="Create Row" />
<table>
<tbody id="tableToModify">
<tr id="rowToClone">
<td><input type="text" name="txt[]"/></td>
<td>bar</td>
</tr>
</tbody>
</table>
function cloneRow() {
var row = document.getElementById("rowToClone"); // find row to copy
var table = document.getElementById("tableToModify"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function createRow() {
var row = document.createElement('tr'); // create row node
var col = document.createElement('td'); // create column node
var col2 = document.createElement('td'); // create second column node
row.appendChild(col); // append first column to row
row.appendChild(col2); // append second column to row
col.innerHTML = "qwe"; // put data in first column
col2.innerHTML = "rty"; // put data in second column
var table = document.getElementById("tableToModify"); // find table to append to
table.appendChild(row); // append row to table
}
Refer : https://stackoverflow.com/a/1728578/3603806

Adding row to table with datepicker

I am trying to add row with button click in table(Add Row). I am trying to add 2 fields dynamically.
1) slno
2) Date/ Time.
My problems :
1) Row is not getting added.
2) How to assign datepicker to "Date /Time" field, added dynamically.
Jsfiddle is http://jsfiddle.net/RXzs7/12/
Pl help.
html code :
<script>
$(document).ready(function() {
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
});
</script>
<body>
<div id="lpage_container">
<div class="lform_container">
<h3>DETAILS OF LOCAL CONVEYANCE EXPENSES :</h3>
<form id="localexpenses" action="">
<table summary="local expense" id="localexpense_table" width="500" border="1">
<thead>
<tr>
<th width="1%" align="center"><strong>Sl.
No.</strong></th>
<th width="7%" align="center">
<strong>Date/Time</strong></th>
<th width="8%" align="center">
<strong>Remove</strong></th>
</tr>
</thead>
<tbody bgcolor="#CCCCCC">
<tr>
<td width="1%" align="center"><input type="text"
name="lsrno_00" id="srno_00" size="1" value="0"></td>
<td width="7%" align="center"><input type="text" class="date"
name="ldate_00" id="ldate_00" value="" size="8"></td>
<td> </td>
</tr>
</tbody>
</table>
<table summary="local buttons" width="500" border="1">
<tr>
<td align="right"><input type="button" value="Add Row"
id="add_ExpenseRowlocal">
</tr>
</table>
</form>
</div><!-- END subject_marks -->
<div class="clearfix"></div>
</div>
JS code :
$(function(){
// GET ID OF last row and increment it by one
var $lastChar =1, $newRow;
$get_lastID = function(){
var $id = $('#localexpense_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
console.log('GET id: ' + $lastChar + ' | $id :'+$id);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='lsrno_0"+$lastChar+"' value='0"+$lastChar+"' size='1'readonly /></td> \
<td><input type='text' class='date' name='ldate_0"+$lastChar+"' id='date_0"+$lastChar+"' size='8'/></td> \
<td><input type='button' value='Remove' class='del_ExpenseRowlocal' /></td> \
</tr>";
return $newRow;
};
// ***** -- START ADDING NEW ROWS
$('#add_ExpenseRowlocal').on("click", function(){
if($lastChar <= 9){
$get_lastID();
$('#localexpense_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
}
});
$(document).on("click", ".del_ExpenseRowlocal", function(){
$(this).closest('tr').remove();
$lastChar = $lastChar-2;
});
});

What jQuery version are you using? In your fiddle you have not added jQuery via the framework tab but under extenral resources you have two versions: 1.6.2 and 1.11.0. When I try and run it I get an error in the console that $().onis not a function. .on() came in jQuery 1.7 so if you are using 1.6.2 then you cannot use .on().
As for the date picker, when you run
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0"
});
in your document ready you add a date picker to all field with class date which currently exist. You must add the date picker to the new date fields after you have added the row to the DOM. Something like
$('.date', $('#localexpense_table tbody tr').filter(':last')).each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
after your .append() call should work.
Working fiddle (needs some styles fixing for the added rows)

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