Highlighted Row on Keydown or Up
How to make the code below that would be able to highlight to yellow the row when onkeydown press down or up. The code below is working on click, I want it works also in key-down press. Any Help Please!
<!DOCTYPE html>
<html>
<head>
<style>
.selected {
color: red;
}
</style>
</head>
<body>
<table id="Tab-14">
<thead><th>ID8</th><th>Company</th></thead>
<tbody>
<tr><td>100</td><td>Peter</td><td><input onkeydown="myIndex(this)" type="text"/></td></tr>
<tr><td>101</td><td>John</td><td><input onkeydown="myIndex(this)" type="text"/></td></tr>
<tr><td>102</td><td>Paul</td><td><input onkeydown="myIndex(this)" type="text"/></td></tr>
<tr><td>103</td><td>Paul</td><td><input onkeydown="myIndex(this)" type="text"/></td></tr>
</tbody>
</table>
<script>
function highlight_row()
{
if (document.getElementById("Tab-14"))
{
var table = document.getElementById('Tab-14');
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
// Take each cell
var cell = cells[i];
// do something on onclick event for cell
cell.onclick = function () {
// Get the row id where the cell exists
var rowId = this.parentNode.rowIndex;
var rowsNotSelected = table.getElementsByTagName('tr');
for (var row = 0; row < rowsNotSelected.length; row++) {
rowsNotSelected[row].style.backgroundColor = "";
rowsNotSelected[row].classList.remove('selected');
}
var rowSelected = table.getElementsByTagName('tr')[rowId];
rowSelected.style.backgroundColor = "yellow";
rowSelected.className += " selected";
}
}
}
}
window.onload = highlight_row;
</script>
<script>
function myIndex(x)
{
var t = document.getElementById("Tab-14");
var ix = x.parentElement.parentElement.rowIndex;
rc = t.rows.length;
if (event.keyCode == 38)
{
if (ix != 1)
{
t.rows[ix - 1].children[2].children[0].focus();
}
}
if (event.keyCode == 40)
{
if (ix != rc - 1)
{
t.rows[ix + 1].children[2].children[0].focus();
}
}
}
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The issue is not yet totally resolve, but I do believe that Mrunal Code will lead me to the correct solution. Thank you!
ASKER