How to clone the highlighted row data to another table when ENTER key is pressed.

How to clone the highlighted row data to another table when ENTER key is pressed.

I am having a html data table with a highlight class to highlight the rows when I press the up-down arrow keys when the table is in focus. I have another table which is blank and I want to add the highlighted rows to the 2nd table when I press the ENTER key. after many tries I am not getting what I want. This is my code what I have tried :

  2. <html><head><title>dynamictable</title>      
  3. <style>
  4. table { cursor: pointer; }
  5. .highlight { background-color: lightgreen; }
  6. </style>
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <table id="myTable" border="1px" style="width: 30%;">
  11. <thead>
  12.   <tr>
  13. <th>##</th>
  14. <th>Name</th>
  15. <th>code</th>
  16. <th>unit</th>
  17. <th>rate</th>
  18.   </tr>
  19. </thead>
  20. <tbody>
  21.   <tr>
  22. <td>1</td>
  23. <td>aaa</td>
  24. <td>aa1</td>
  25. <td>aa</td>
  26. <td>111</td>
  27.   </tr>
  29. <tr>
  30. <td>1</td>
  31. <td>aaa</td>
  32. <td>aa1</td>
  33. <td>aa</td>
  34. <td>111</td>
  35.   </tr>
  36. </tbody>
  37.   </table>
  38.   
  39. <br>
  40. <br>
  41. <br>
  42. <input type="button" id="goto_first" value="first" class="btn btn-success">
  43. <input type="button" id="goto_prev" value="prev" class="btn btn-secondary">
  44. <input type="button" id="goto_next" value="next" class="btn btn-secondary">
  45. <input type="button" id="goto_last" value="last" class="btn btn-success">
  46. <br>
  47. <br>
  48. <br>

  50.   <table id="cloneTable" border="1px" style="width: 30%; float :left;"><!--new table to clone data-->
  51. <thead>
  52.   <tr>
  53. <th>##</th>
  54. <th>Name</th>
  55. <th>code</th>
  56. <th>unit</th>
  57. <th>rate</th>
  58.   </tr>
  59. </thead>
  60. <tbody>
  61. </tbody>
  62.   </table>
  63.   
  64. </body>

  66. <script>
  67. $(document).ready(function(){
  68. $('#myTable').focus();
  69. });

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

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

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

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

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

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

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

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

  100. switch (e.which) {
  101. case 38:
  102. $('#goto_prev').trigger('click');
  103. break;
  104. case 40:
  105. $('#goto_next').trigger('click');
  106. break;
  107. }

  109. });

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

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

  116. var newTr = $(this).closest("tr").clone();
  117. items.push(newTr);
  118. newTr.appendTo($("#cloneTable"));
  119.   });
  120. })
  121. </script>
  122. </html>