javascript - 如何在表格中聚焦自定义单元格？

Question

我有一个表和 rowSelected，我希望当用户聚焦在 4th td 和 6th td 时获得焦点而不是 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);              

例如:我在控制台中得到结果“4”

现在，我希望 6td 获得焦点。

我写了这个，但我没有正确的答案。

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

如何实现？

Answer 1

您可以引用以下代码以获得帮助。在这里我们添加了 focusout所有input的听众<table> 中存在的元素元素。我们检查是否 focusout发生在第 4 个单元格的 input或不。如果它是从那里发生的，那么我们将不得不关注第 6 个单元格的 input。盒子。希望它能指导您实现目标。

$(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>