0

I have an HTML <table> with data. Upon clicking the table rows, I can add the clicked row to another table. But I want to highlight the row with arrow keys and, on pressing the Enter key on the highlighted row, add the data of the highlighted row to the new table.

How can I do that?

What I have tried so far:

$(document).ready(function(){
 $('#myTable').focus();
});

function highlight(tableIndex) {
if ((tableIndex + 1) > $('#myTable tbody tr').length) //restart process
tableIndex = 0;

if ($('#myTable tbody tr:eq(' + tableIndex + ')').length > 0) {
$('#myTable tbody tr').removeClass('highlight');

$('#myTable tbody tr:eq(' + tableIndex + ')').addClass('highlight');
}
}

$('#goto_first').click(function() {
highlight(0);
});

$('#goto_prev').click(function() {
highlight($('#myTable tbody tr.highlight').index() - 1);
});

$('#goto_next').click(function() {
highlight($('#myTable tbody tr.highlight').index() + 1);
});

$('#goto_last').click(function() {
highlight($('#myTable tbody tr:last').index());
});

$(document).keydown(function(e) {

switch (e.which) {
case 38:
$('#goto_prev').trigger('click');
break;
case 40:
$('#goto_next').trigger('click');
break;
}

});

$(document).ready(function() {
  var items = [];

  $("#myTable tr").on('click', function(e) {

    var newTr = $(this).closest("tr").clone();
    items.push(newTr);
    newTr.appendTo($("#cloneTable"));
  });
})
<html><head><title>dynamictable</title>      
<style>
table { cursor: pointer; }
.highlight { background-color: lightgreen; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <table id="myTable" border="1px" style="width: 30%;">
    <thead>
      <tr>
        <th>##</th>
        <th>Name</th>
        <th>code</th>
        <th>unit</th>
        <th>rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>aaa</td>
        <td>aa1</td>
        <td>aa</td>
        <td>111</td>
      </tr>
      <tr>
        <td>1</td>
        <td>aaa</td>
        <td>aa1</td>
        <td>aa</td>
        <td>111</td>
      </tr>
    </tbody>
  </table>
  
<br>
<br>
<br>
<input type="button" id="goto_first" value="first" class="btn btn-success">
<input type="button" id="goto_prev" value="prev" class="btn btn-secondary">
<input type="button" id="goto_next" value="next" class="btn btn-secondary">
<input type="button" id="goto_last" value="last" class="btn btn-success">
<br>
<br>
<br>

  <table id="cloneTable" border="1px" style="width: 30%; float :left;"><!--new table to clone data-->
    <thead>
      <tr>
        <th>##</th>
        <th>Name</th>
        <th>code</th>
        <th>unit</th>
        <th>rate</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
 </body>
 </html>
ritesh rc
  • 33
  • 6

2 Answers2

1

I was going to write a custom response but check this out, it addresses your issue: Use arrow keys to navigate an HTML table

You're also missing a closing quotation mark around your "width: 30%" for your opening parent div

wannabdev
  • 11
  • 2
  • I have changed the code and added the row highlight option. Also on clicking any row the data is cloned to the new row, but I wan to add the data to the new table only from the highlighted row and only by pressing enter key. – ritesh rc Apr 13 '18 at 04:50
  • It sounds like you're almost there. Give the highlighted row a class or id when highlighted, and then change your click handler to a keyboard event handler on the 'enter' key, and have it do what you're currently doing but on the class or id of the selected row. – wannabdev Apr 13 '18 at 18:37
1

Here you go 

// highlight first row default
$("#myTable tbody tr:first-child").addClass("highlight");

document.onkeydown = moveAndAdd;

function moveAndAdd(e) {
  e = e || window.event; 
  if (e.keyCode == "38") {
    // up arrow
    activeRow = $("tr.highlight"); /* get highlighted row */
    activeRow.focus();
      prevRow = activeRow.prev('tr'); /*very previous siblings*/
      if (prevRow.length>0) {
      activeRow.removeClass("highlight"); /*remove highlight from active class */
      prevRow.addClass("highlight"); /* make very prev row highlighted*/
    }
  } else if (e.keyCode == "40") {
    // down arrow
    activeRow = $("tr.highlight"); /* get highlighted row */
    activeRow.focus();
    nextRow = activeRow.next('tr'); /*very previous siblings*/
      if (nextRow.length>0) {
      activeRow.removeClass("highlight");
      nextRow.addClass("highlight");
    }
  }
  else if (e.which == 13 || e.which == 32) { 
        // Enter or Spacebar - edit cell
        e.preventDefault();
         cloneRow = $(".highlight").clone(true); /*clone highlighted row*/
        $("#cloneTable").append(cloneRow.removeClass("highlight")); /*append cloned row but remove class */
    }
}

table {
  color:black;
  background-color:white;
}
.highlight{
  color:White;
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1px" style="width: 30%;">
    <thead>
      <tr >
        <th>##</th>
        <th>Name</th>
        <th>code</th>
        <th>unit</th>
        <th>rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td >1</td>
        <td>aaa</td>
        <td>aa1</td>
        <td>aa</td>
        <td>111</td>
      </tr>
      <tr>
        <td>2</td>
        <td>bbb</td>
        <td>bb2</td>
        <td>bb</td>
        <td>222</td>
      </tr>
       <tr>
        <td>3</td>
        <td>ccc</td>
        <td>cc3</td>
        <td>cc</td>
        <td>333</td>
      </tr>
       <tr>
        <td>4</td>
        <td>ddd</td>
        <td>dd1</td>
        <td>dd</td>
        <td>444</td>
      </tr>
    </tbody>
  </table>
 <table id="cloneTable" border="1px" style="width: 30%; float :left;">
    <thead>
      <tr>
        <th>##</th>
        <th>Name</th>
        <th>code</th>
        <th>unit</th>
        <th>rate</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
monikapatelIT
  • 977
  • 14
  • 26