How to Add Focus to a Table Row <Tr>

How to add Focus to a table row tr?

The :focus pseudo class only works with form elements such as <input>, <button> etc. You can add it to a non-form element like <tr> by adding tabindex, e.g.:

<tr tabindex="0">

Then apply the CSS as normal.

.my_table tbody tr:hover {  background-color: blue;}
.my_table tbody tr:focus {  background-color: red;  outline: 0; /*remove outline*/}

<table class="my_table" border>  <thead>    <tr>      <th>Name</th>      <th>Address</th>      <th>Celphone</th>    </tr>  </thead>  <tbody>    <tr ng-repeat="contact in contacts" tabindex="0">      <td>{{contact.Name}}</td>      <td>{{contact.Address}}</td>      <td>{{contact.Celphone}}</td>    </tr>  </tbody></table>

Setting focus on table row elements

Here is a little technique for handling the keydown events for up/down arrows to navigate your table rows (<tr>). You may need to tweak the upper and lower tabindex handling from your generated data but that's on you. GL!

(jsfiddle: https://jsfiddle.net/qkna8jgu/2/ )

Sample HTML:

<table>
  <tr tabindex="0">
    <td>first row</td>
  </tr>
  <tr tabindex="1">
    <td>second row</td>
  </tr>
  <tr tabindex="2">
    <td>third row</td>
  </tr>
  <tr tabindex="3">
    <td>fourth row</td>
  </tr>
  <tr tabindex="4">
    <td>fifth row</td>
  </tr>
  <tr tabindex="5">
    <td>sixth row</td>
  </tr>
  <tr tabindex="6">
    <td>seventh row</td>
  </tr>
</table>

jQuery:

$(document).ready(function() {
    $("tr[tabindex=0]").focus();    
    document.onkeydown = checkKey;
});

function checkKey(e) {
    var event = window.event ? window.event : e;
    if(event.keyCode == 40){ //down
      var idx = $("tr:focus").attr("tabindex");
      idx++;
      if(idx > 6){
        idx = 0;
      }
      $("tr[tabindex="+idx+"]").focus();
    }
    if(event.keyCode == 38){ //up
      var idx = $("tr:focus").attr("tabindex");
      idx--;
      if(idx < 0){
        idx = 6;
      }
      $("tr[tabindex="+idx+"]").focus();      
    }
}

Focus on Table row TR for accessiblity

I would do this (using jQuery) by $('tr').first().find('input').first().focus() , I did not know however Coomie's solution. I am not sure if his solution with html will work in IE. There are however some issues with focus() and limitation, if you decide to use this solution make sure you have read about jQuery focus()

How to focus table row?

tr elements can not accepts focus by default. To enable focus behaviour, add tabindex={0} on <tr>

Can not set focus on a table row

You cannot set the focus on a td or tr elements. However, you can place an input element within the td element and then set the focus.

Hope this helps...

Focus the first element on a new row

That's saying, "Find the first td in table."

You want, "Find the first td in the last tr in table."

$('table tr').last().find('td').first().focus();

That's assuming the last tr is the row that was just added.

Change color of tr when element inside is in focus

No. There's no subject selector in CSS3, there will be one in CSS4 though.

EDIT:

A pure JavaScript solution could be

var i;
var inputs = document.querySelectorAll("tr > td > input");
for(i = 0; i < inputs.length; ++i){
    inputs[i].addEventListener('focus',function(e){
        this.parentNode.parentNode.className += ' highlight';        
    });
    inputs[i].addEventListener('blur',function(e){
        this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' ');
    });
}

However, this won't work in IE≤7, as versons prior 8 don't know document.querySelectorAll (demonstration). If you want a care-free cross-browser solution you could use jQuery and the following code (demonstration):

$("tr > td > input").focus(function(e){
    $(this).parent().parent().addClass('highlight');
}).blur(function(e){
    $(this).parent().parent().removeClass('highlight');
});

Don't forget to add a class tr.highlight to your CSS. Keep in mind that jQuery will drop support of old browsers in future releases (see Browser Support), so you'll have to use jQuery 1.x for IE ≤8.

HTML Form - Script To add New Table Row and set focus on first input

Place the following line within the eventHandler of the #addRow button. Also just outside the eventHandler if you want the first input to be selected initally when the page loads.

$('tr').last().find('td:first-of-type input').focus();

The lines are commented in the code below:

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);

    // This will focus on the new input on every click 
    $('tr').last().find('td:first-of-type input').focus();

  });
  /*
  This line is added if the input is selected on page load
  */
  $('tr').last().find('td:first-of-type input').focus();

  $("#shipmentItems").on("click", ".deleteRow", function() {
    $(this).closest('tr').remove();
  });
});

$(document).ready(function() {
  $(document).on('change', '.form-control.serialNumber', function() {

    var serialNumber = $(this).val();
 
    $this = $(this);

    ID = 'ABC123';
    code = 'PC8765';
    description = 'Acme Standard Widget';

    $this.closest('tr').find('.form-control.assetID').val(ID);
    $this.closest('tr').children('.code').html(code);
    $this.closest('tr').children('.description').html(description);

    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table id="shipmentItems" class="table table-condensed table-striped table-bordered">
  <thead>
    <th class="text-center" scope="col" width="20%">Serial</th>
    <th class="text-center" scope="col" width="15%">ID</th>
    <th class="text-center" scope="col" width="15%">Code</th>
    <th class="text-center" scope="col" width="45%">Description</th>
    <th class="text-center" scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td class="code"></td>
      <td class="description"></td>
      <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
    </tr>
  </tbody>
</table>

<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button>    

---

Related Topics