I have written code for html table and want to navigate it up/down/left/right using arrow keys as in excel.
https://jsfiddle.net/daa3muLp/6/ is the fiddle post created. It works for up/down arrow keys and ctrl+right/left but the problem is when columns are added dynamically using add employee button.
<input type="button" value="Add Employee" id="btnAddCol" onclick="window.addCol('dataTable')" />
<table id="dataTable">
<tr id="r_0">
<th></th>
<th>Date</th>
<th>RM</th>
<th>WS</th>
<th>FH</th>
<th>OT-R</th>
<th>OT-W</th>
<th>OT-F</th>
</tr>
<tr id="r_1">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="22-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_1.1" title="ROM, Date: 1" size="1">
</td>
<td>
<input type="text" name="waste_1.1" title="Waste, Date: 1" size="1">
</td>
<td>
<input type="text" name="fh_1.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_1.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_1.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_1.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_2">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="23-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_2.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_2.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_2.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_2.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_2.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_2.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_3">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="24-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_3.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_3.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_3.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_3.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_3.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_3.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_4">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="25-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_4.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_4.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_4.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_4.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_4.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_4.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_5">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="26-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_5.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_5.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_5.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_5.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_5.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_5.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
//cursor movement with keyboard js code
$('input[name^="rom_"], input[name^="waste_"], input[name^="fh_"], input[name^="ot-rom_"], input[name^="ot-waste_"],input[name^="ot-FH_"]').bind('keyup', function(e) {
var isCtrl = false;
if (window.event)
isCtrl = !!window.event.ctrlKey;
else
isCtrl = !!ev.ctrlKey;
var $this = $(this);
var $tr = $this.closest('tr');
var name = this.name.substring(0, this.name.indexOf('_'));
var str = this.name;
row = str.substring(str.indexOf("_") + 1, str.indexOf("."));
pos = str.indexOf("_") + 1;
next = str.replace(row, parseInt(row) + 1);
prev = str.replace(row, parseInt(row) - 1);
if (e.keyCode == 38) {
$('input[name="' + prev + '"]').focus();
} else if (e.keyCode == 40) {
$('input[name="' + next + '"]').focus();
} else if (isCtrl && e.keyCode == 37) {
temp = $this.closest("td").prev().children().focus();
} else if (isCtrl && e.keyCode == 39) {
$this.closest("td").next().children().focus();
}
});
});
window.addCol = function addCol(tableName) {
var countCol = parseInt($("#"+tableName).attr('data-countCol'), 10) || 1;
var row = 0;
$("#"+tableName).attr('data-countCol', ++countCol);
var tempName = $("#"+tableName+" #searchName_1").clone(false, false);
var tempToken = $("#"+tableName + " #searchToken_1").clone(false, false);
tempName.prop("value", "");
tempName.prop("readonly", true);
tempToken.prop("value", "");
tempName.attr("id", "searchName_" + countCol);
tempToken.attr("id", "searchToken_" + countCol);
tempName.prop("name", "searchName_" + countCol);
tempToken.prop("name", "searchToken_" + countCol);
$("#"+tableName+" tr:first ").append("<th colspan=\"6\"> </th>").find("th:last").wrapInner(tempName);
$("#"+tableName+ " tr:nth-child(2)").append("<th colspan=\"6\"></th>").find("th:last").wrapInner(tempToken);
$("#"+tableName +" tr:nth-child(3)").append("<th>R</th><th>W</th> <th>FH</th><th>OTR</th><th>OTW</th><th>OTFH</th>");
$('#dataTable tr:gt(2)').each(
function () {
row = row + 1;
$('<td><input type="text" size=1 name=rom_' + row + '.' + countCol + ' title= "ROM, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=waste_' + row + '.' + countCol + ' title= "Waste, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=fh_' + row + '.' + countCol + ' title= "FH, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" name="ot-rom_' + row + '.' + countCol + '" title= "OT-ROM, Date: '+ row +'" size=1 class="ot" onblur="validateField(this)"> </td><td><input type="text" title= "OT-Waste, Date: '+ row +'" name="ot-waste_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"></td><td><input type="text" title= "OT-FH, Date: '+ row +'" name="ot-FH_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"> </td>').insertAfter($(this).children('td:last'));
}
);
};
</script>
I have even tried using .on() of jquery but it didn't work.
Use $(document).on('keyup','input[name^="rom_"], input[name^="waste_"]........', function(e) {
You have to bind the event to a parent element because the input doesn't exist yet.
Updated Fiddle : https://jsfiddle.net/daa3muLp/7/