CODEWITHSUNDEEP
javascriptjqueryhtml
CodeRed
CodeRed

Reputation: 903

How to use tab keys to focus in an input?

I have a table with td's that if double clicked, become input fields. Now, I want to jump from an input to another.

I already made this to change my td to an input:

var id = $(this).closest("tr").find("cell_id").text();
var html = $(this).text();
var input = $('<input id="txt_id" type="text"/>');
input.val(html);
$(this).html(input);

And this to jump from one to other:

$("#mainTable").on("keydown","td.mainCellQuantity",function(e) {
      var keyCode = e.keyCode || e.which;

      if(keyCode==9||keyCode==13){
       e.preventDefault();
       var cellIndex = $(this).index();
       $(this).closest('tr').next().children().eq(cellIndex).dblclick();
      }
});

The above codes are working but the input's are not focused. I want them to be focused after tab press.

var rows = parseInt(document.getElementById("my_table").getElementsByTagName("tbody")[0].rows.length);
var table = document.getElementById("mainTable").getElementsByTagName("tbody")[0];

var row = table.insertRow(rows);


var cell1 = row.insertCell(0);

cell1.innerHTML = editable_cell_being_transformed_to_input;

I want this cell1 to be focused since upon double clicked, it only change the td to input but not focusing: this image shows what i want

Upvotes: 1

Views: 96

Answers (1)

Elish
Elish

Reputation: 486

An alternative: Instead of replacing td with input you can set contenteditable attribute to true for each td. This allows editing the td content. Also pressig Tab key moves focus to next td by default.

Example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td contenteditable="true">data 1</td>
    <td contenteditable="true">data 2</td>
    <td contenteditable="true">data 3</td>
  </tr>
</table>

Upvotes: 1

Related Questions