CODEWITHSUNDEEP
javascriptjqueryhtml
Mohsen Zahedi
Mohsen Zahedi

Reputation: 688

how to focus a custom cell in table?

I have a table and rowSelected,I want when user focusout on 4th td the 6th td get focus instead of td 5.

   var rowindex=$("#mycustomizedtable).attr('rowselected);
   
   var row=$("#mycustomizedtable tbody).find('tr')[rowindex];

   var tds=$(row).find('td');

   var colselected=$("#mycustomizedtable).attr('colselected');
                  
  
   console.log(colselected);

for example : I get result '4' in console

Now,I want 6td get focus.

I write this but I have not the right answer.

if(colselected==4)
  {
    $(row).find('td').eq(6).focus();
  }

How can it be done?

Upvotes: 1

Views: 1176

Answers (1)

vijayP
vijayP

Reputation: 11502

you can refer below code for the help. Here we have added the focusout listener to all the input elements present in out <table> element. We check if focusout is happening from 4th cell's input or not. And if it is happening from there then we are forcing to focus in 6th cell's input box. Hope it will guide you to achieve your goal.

$(document).ready(function(){
  $("#mycustomizedtable td input").focusout(function(){
    var currentElem = $(this);
    var currentIndex = currentElem.closest("td").index();
    if(currentIndex == 3)
      currentElem.closest("tr").find(":nth-child(6)").find("input").focus();
  });  
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="mycustomizedtable">
  <thead>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
    <th>Fourth</th>
    <th>Fifth</th>
    <th>Sixth</th>
    <th>Seventh</th>
 </thead> 
 <tbody>
   <tr>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
     <td><input type="text" value="5th value"/></td>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
   </tr>
   <tr>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
     <td><input type="text" value="5th value"/></td>
     <td><input type="text"/></td>
     <td><input type="text"/></td>
   </tr>  
 </tbody>
</table>

Upvotes: 2

Related Questions