We Keep Coding

HTML table rows navigate by keyboard in JQuery

I have a HTML table which is created by Ajax. Rendered markup of this table as below:
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>
Using this table, basically I want to navigate the table row using 'up' and 'down' arrow key on keyboard. After selecting the right row, the user should be able to check the radio button (within the selected row) by pressing the enter key.
This is my jQuery code sofar :
$(document).ready(function() {
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
$('#tbl_byKeyboard tbody tr').removeClass('active');
$this.addClass('active');
}
}
}
Stack snippet:
$(document).ready(function() {
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
$('#tbl_byKeyboard tbody tr').removeClass('active');
$this.addClass('active');
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>
My problem is, with this code I can navigate table rows using 'up' and 'down' arrow key, but enter key not working for me.
Hope somebody may help me to figure this out.

The problem is, that at the beginning of your keydown handler you remove the class active:
var $cur = $('.active', $tbl).removeClass('active').first();
But in the if for the Enter case you don't set that class again, when the input is checked:
if (inp.is(':checked')) {
inp.prop('checked', false);
}
Furthermore the manipulation of the class isn't necessary in the Enter case - it's only important for the Up and Down keys. Therefor you should remove the active class only in these two cases:
var $cur = $('.active', $tbl).first();
if (e.keyCode === 40) { //down
$cur.removeClass('active');
...
} else if (e.keyCode == 38) { //up
$cur.removeClass('active');
...
}
Because the removal for the Enter case isn't necessary, you can omit it there:
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
}
Working example:
i added a small line to focus the first radiobutton for demonstration:
$('#tbl_byKeyboard input[type=radio]').eq(0).focus();
$(document).ready(function() {
$('#tbl_byKeyboard input[type=radio]').eq(0).focus();
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).first();
if (e.keyCode === 40) { //down
$cur.removeClass('active');
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
$cur.removeClass('active');
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>

Autonumbering is not working on added rows

I have 2 functions. Add dynamic rows and Autonumbering. My problem is, my autonumbering is not working on my dynamically added rows. I wonder what could be the problem? The "class="form-control" is all the same for my input type field. However, it is still not working. I have provided my js fiddle below.
https://prnt.sc/124vuju
https://jsfiddle.net/rain0221/59k4c0yg/3/ // in "lb" column, type any number and hit ctrl+enter in order to do autonumbering
//this is my function for autonumbering
const inputs = document.querySelectorAll(".form-control");
inputs[0].addEventListener("keyup", e => {
let value = parseInt(e.target.value);
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
inputs.forEach((inp, i) => {
if (i !== 0) {
inp.value = ++value;
}
})
}
})
//this is my function for adding dynamic rows.
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" id="auto" value="" class="form-control" type="number" readonly /></td>"' +
'<td><input id="weight' + rowIndex + '" name="weight' + rowIndex + '" type="number" /></td>"' +
'<td><input id="wingBand' + rowIndex + '" name="wingBand' + rowIndex + '" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
$(document).on('click', '.removerow', function() {
$(this).parents('tr').remove();
regenerate_auto_num();
});
function regenerate_auto_num() {
let count = 1;
$(".auto_num").each(function(i, v) {
$(this).val(count);
count++;
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto" />
</td>
<td class="labelcell">
<input name="weight" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

You need to find the elements inside eventListener event. Since you are finding the element global onload so if will not hold the elements added dynamically. You can move the blow code inside addEventListener keyup event.
const inputs = document.querySelectorAll(".form-control");
To attach the keyup event, you can use document.querySelectorAll(".form-control")[0] instead of inputs[0].
document.querySelectorAll(".form-control")[0].addEventListener("keyup", e => {
const inputs = document.querySelectorAll(".form-control");
let value = parseInt(e.target.value);
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
inputs.forEach((inp, i) => {
if (i !== 0) {
inp.value = ++value;
}
})
}
});
I can see that you have assigned the 'form-control' class only for LB# column so autonumber will be generate only for LB#. In case you want to generate autonumber for all the columns, assign the class="form-control" to each added dynamically.

The problem is that you are addding keyup listeners only to those elements that are already present in the DOM at the time you are adding them.
What you need instead is called delegate listeners, and it means that you rely on the mechanism that most events bubble up in the DOM, allowing you to attach the keyup listener to an element that is an ancestor to all the input elements of interest.
Inside that listener, you then check if the element they event came from is one you want to handle.
//this is my function for autonumbering
const inputAncestor = document.querySelector("tbody");
inputAncestor.addEventListener("keyup", e => {
if (
e.target.matches('input.form-control') &&
((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10))
) {
const inputs = document.querySelectorAll(".form-control");
let value = parseInt(e.target.value);
inputs.forEach((inp) => {
if (inp !== e.target) {
inp.value = ++value;
}
})
}
})
//this is my function for adding dynamic rows.
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" value="" class="form-control" type="number" readonly /></td>"' +
'<td><input id="weight' + rowIndex + '" name="weight' + rowIndex + '" type="number" /></td>"' +
'<td><input id="wingBand' + rowIndex + '" name="wingBand' + rowIndex + '" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
$(document).on('click', '.removerow', function() {
$(this).parents('tr').remove();
regenerate_auto_num();
});
function regenerate_auto_num() {
let count = 1;
$(".auto_num").each(function(i, v) {
$(this).val(count);
count++;
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto" />
</td>
<td class="labelcell">
<input name="weight" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=5><button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>
Unfortunately, your code has several more problems, which I tried to fix.
As mentioned in the first comment to your question, you cannot have a div as a child of tbody. Only tr is allowed here.
You are using duplicate id value auto. That is invalid HTML.
In your markup, you have the class form-control on all the inputs. In your dynamically added markup it's only on the first input. Which version is the correct one?
In your tfoot you had the button as direct child. This is, again, invalid HTML. The only child element(s) tfoot can have is tr.
The very first row in your table describes the columns and acts as your table's header, yet it did not reside in the thead part of your table.

How to convert javascript fill table to fill form

My script calculates the price and shows the results in the table. I want to see that in the form which I can submit. Here is JavaScript code
<script type="text/javascript">
function update(){
var sum = 0;
$("#calculator > tbody > tr").each(function(){
var amount = parseFloat($(this).find("td").eq(1).find('input').val());
var value = $(this).find("td:eq(2)");
var price = $(this).find("td:eq(0)");
if (amount > 0 && amount < 501) {
price.text(0.37);
} else
if (amount > 500 && amount < 3001) {
price.text(0.32);
} else
if (amount > 3000 && amount < 6001) {
price.text(0.25);
} else
if (amount > 6000 && amount < 10001) {
price.text(0.21);
} else
if (amount > 10000) {
price.text(parseFloat(0.20).toFixed(2));
}
var _price = parseFloat(price.text());
if (amount > 0 && amount !== undefined ) {
value.text(parseFloat(_price*amount).toFixed(2));
sum += _price*amount;
} else {
value.text(0);
}
});
$("#summary").text(parseFloat(sum).toFixed(2));
}
$(document).ready(function(){
update();
$("#calculator input").keyup(function(){
update();
});
});
</script>
And this is the table code in html
<table id="calculator" class="table table-striped table-hover">
<thead>
<tr>
<th><p align="right">Price</p></th>
<th><p align="center">Amount</p></th>
<th><p align="left">Value</p></th>
</tr>
</thead>
<tbody>
<tr>
<td align="right"></td>
<td align="center"><input style="width:50px;" type="text" /></td>
<td align="left"></td>
</tr>
</tbody>
</table>
After fill Amount the script counts Value using price with rules. Please help me with convert that to do it not in the table but in the form.
<form id="transfer">
<input class="text" id="price" type="text" value="" />
<input class="text" id="amount" type="text" value="" />
<input class="text" id="value" type="text" value="" />
</form>

Delete last row of table unless its the only row with jquery

I have buttons that add and (supposedly) remove rows and elements in a table dynamically.
I cannot however get the last row in the table to delete unless it is the last remaining row.
My goal is there must be at least 1 (the first row with inputs) that cannot be deleted.
my HTML:
<TABLE id="tblTradesman">
<TR>
<TH>Name:</TH>
<TH>Arrive: (hh:mm)</TH>
<TH>Leave: (hh:mm)</TH>
</TR>
<TR>
<div id="rows">
<TD><input type="text" id="txtTradesman<? $i ?>"></TD>
<TD><input type="text" id="txtTimeArrive<? $i ?>"></TD>
<TD><input type="text" id="txtTimeLeave<? $i ?>"></TD>
</div>
</TR>
</TABLE>
<input id="btnAddTradesperson" type="button" value="Add" /><input id="btnDelTradesperson" type="button" value="Del" />
My Scripts:
$("#btnAddTradesperson").click(function () {
$("#tblTradesman").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
$("#btnDelTradesperson").click(function (){
$("#tblTradesman").each(function(){
if($('tbody', this).length > 1){
$('tbody tr:last', this).remove();
}else {
alert("Must be at least 1 Trades person assigned to this job.")
}
});
});
Link to FIDDLE demo
I FIGURE IT OUT:
if($('tbody tr', this).length > 1)
Adding the 'tr' was key to it all.

Your html is invalid(div cannot be a child of tr) and need to use thead and tbody to separate the table header and body
<TABLE id="tblTradesman">
<thead>
<TR>
<TH>Name:</TH>
<TH>Arrive: (hh:mm)</TH>
<TH>Leave: (hh:mm)</TH>
</TR>
</thead>
<tbody>
<TR>
<TD><input type="text" id="txtTradesman<? $i ?>"/></TD>
<TD><input type="text" id="txtTimeArrive<? $i ?>"/></TD>
<TD><input type="text" id="txtTimeLeave<? $i ?>"/></TD>
</TR>
</tbody>
</TABLE>
<input id="btnAddTradesperson" type="button" value="Add" /><input id="btnDelTradesperson" type="button" value="Del" />
then
var $tbody = $("#tblTradesman tbody")
$("#btnDelTradesperson").click(function (){
var $last = $tbody.find('tr:last');
if($last.is(':first-child')){
alert('last is the only one')
}else {
$last.remove()
}
});
Demo: Fiddle

Your code is modified to make it work:
$("#btnAddTradesperson").click(function () {
$("#tblTradesman").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
$("#btnDelTradesperson").click(function (){
$("#tblTradesman").each(function(){
if($('tbody', this).length > 0 && $('tbody tr').length > 2){
$('tbody tr:last', this).remove();
}else {
alert("Must be at least 1 Trades person assigned to this job.")
}
});
});

Using arrows-keys to navigate and select text in input box

as explain on solution for the issue:
Using arrows-keys to navigate
http://jsfiddle.net/BdVB9/
I have same table with some text input, and I got some problem to select text in input box in tables cells during navigating between cells.
can any one help me to solve it? navigation works fine but not select text in input box!!! and also i want to navigate only between cells that have input-box, not all them
Notes: I just want to navigate between cells that have text input-box.
table codes:
<table border="1" id="navigate">
<tbody>
<tr>
<td><input type="text" id="1" class="input"></td>
<td></td>
<td><input type="text" id="3" class="input"></td>
<td></td>
<td><input type="text" id="5" class="input"></td>
</tr>
<tr>
<td><input type="text" id="6" class="input"></td>
<td><input type="text" id="7" class="input"></td>
<td></td>
<td><input type="text" id="9" class="input"></td>
<td><input type="text" id="10" class="input"></td>
</tr>
<tr>
<td><input type="text" id="11" class="input"></td>
<td><input type="text" id="12" class="input"></td>
<td></td>
<td><input type="text" id="14" class="input"></td>
<td><input type="text" id="15" class="input"></td>
</tr>
</tbody>
</table>
and this is my own demon

I put together a fiddle with the functionality you specified http://jsfiddle.net/tppiotrowski/L7cm8/10/. I hope I understood your requirements correctly. Let me know if you need any alterations or do not understand the code. Good luck!
var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();
$(document).keydown(function(e) {
reCalculate(e);
rePosition();
// if key is an arrow key, don't type the user
// input. if it is any other key (a, b, c, etc)
// edit the text
if (e.keyCode > 36 && e.keyCode < 41) {
return false;
}
});
$('td').click(function() {
active = $(this).closest('table').find('td').index(this);
rePosition();
});
function reCalculate(e) {
var rows = $('#navigate tr').length;
var columns = $('#navigate tr:eq(0) td').length;
var temp;
if (e.keyCode == 37) { //move left or wrap
temp = active;
while (temp > 0) {
temp = temp - 1;
// only advance if there is an input field in the td
if ($('#navigate tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
if (e.keyCode == 38) { // move up
temp = active;
while (temp - columns >= 0) {
temp = temp - columns;
// only advance if there is an input field in the td
if ($('#navigate tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
if (e.keyCode == 39) { // move right or wrap
temp = active;
while (temp < (columns * rows) - 1) {
temp = temp + 1;
// only advance if there is an input field in the td
if ($('#navigate tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
if (e.keyCode == 40) { // move down
temp = active;
while (temp + columns <= (rows * columns) - 1) {
temp = temp + columns;
// only advance if there is an input field in the td
if ($('#navigate tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
}
function rePosition() {
console.log(active);
$('.active').removeClass('active');
$('#navigate tr td').eq(active).addClass('active');
var input = $('#navigate tr td').eq(active).find('input').focus();
scrollInView();
}
function scrollInView() {
var target = $('#navigate tr td:eq(' + active + ')');
if (target.length) {
var top = target.offset().top;
$('html,body').stop().animate({
scrollTop: top - 100
}, 400);
return false;
}
}​

Take a look at this JQFAQ post How to select a table cell using click or navigation keys?
this have some thing you want.