Jquery table select row add class and get value select row

Question

How I can addclass to selected row and get value selected row when keys click?

 $("#example tr").click(function() { $(this).addClass('selected').siblings().removeClass('selected'); value = $(this).find('td:first').html(); }); $(document).on('keydown', function(e) { e.preventDefault(); if (e.which == 38) { $('.selected').prev('tr').addClass('selected').siblings().removeClass('selected'); $('#testidyeni').text("test"); } else if (e.which == 40) { $('.selected').next('tr').addClass('selected').siblings().removeClass('selected'); } });

 <table class="table table-hover table-bordered table-scroll" id="example"> <thead> <tr> <th scope="col"> Id </th> <th scope="col"> Aksesuar kateqoriya </th> </tr> </thead> <tbody name=""> <?php foreach ($testcek as $olculer ) {?> <tr class="selected"> <th scope="row"> <?php echo $olculer['id']; ?> </th> <td class="" value="<?php echo $olculer['id']; ?>"> <?php echo $olculer['aksesuaradi']; ?> </td> </tr> <?php }?> </tbody> </table>

Answer 1

After setting .selected class to new row it's simply. Just use:

$('#example .selected td:first').text();

Answer 2

You can move the arrow up and down function out of your row selection function. If there is no selected row then nothing will happen.

Please check the commented example below. I've added some checks to see if you're at the top or bottom of the table.

Let me know if you wanted something else

---

 $("#example tr").click(function() { // Exit early if already selected if ($(this).hasClass("selected")) { return; } // Remove selected class from any row $("#example tr.selected").removeClass("selected"); // Assign selected class to clicked row $(this).addClass("selected"); // Flag a selection change selectionChange(); }); // This is unchanged $(document).on('keydown', function(e) { e.preventDefault(); // Check if no row is selected if ($('tr.selected').length == 0 && (e.which == 38 || e.which == 40)) { // Select first row that is not the header $('tr:not(.header)').first().addClass("selected"); selectionChange(); // Leave the function early return; } // If arrow down clicked if (e.which == 38) { // Move selected row up one if ($('.selected').prev('tr').hasClass("header")) { console.log("Don't move to header row"); } else { $('.selected').prev('tr').addClass('selected').siblings().removeClass('selected'); selectionChange(); } } else if (e.which == 40) { // If arrow up // Move down a row if ($('.selected').next('tr').length == 0) { console.log("Do not move down if at bottom of table"); } else { $('.selected').next('tr').addClass('selected').siblings().removeClass('selected'); selectionChange(); } } }); // Get value of selected row function selectionChange() { v = $("tr.selected td:first").text(); console.log(v); }

 tr.selected { background: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-hover table-bordered table-scroll" id="example"> <thead> <tr class="header"> <th scope="col"> Id </th> <th scope="col"> Aksesuar kateqoriya </th> </tr> <tr> <td>1</td> <td>Alpha</td> </tr> <tr> <td>2</td> <td>Beta</td> </tr> </thead> </table>