Wie fokussiere ich eine benutzerdefinierte Zelle in der Tabelle?

Question

Ich habe eine Tabelle und rowSelected, ich will, wenn Benutzer focusout am 4. td die 6. td statt 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);   

td konzentrieren erhalten

zum Beispiel: Ich Ergebnis zu erhalten '4' in Konsole

Jetzt möchte ich 6td Fokus bekommen.

Ich schreibe dies, aber ich habe nicht die richtige Antwort.

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

Wie kann es geschehen?

Answer 1

können Sie unten Code für die Hilfe beziehen. Hier haben wir den focusout Listener zu allen input Elementen hinzugefügt in <table> Element hinzugefügt. Wir prüfen, ob focusout von input der 4. Zelle geschieht oder nicht. Und wenn es von dort passiert, dann zwingen wir uns, in der input Box der 6. Zelle zu konzentrieren. Hoffe, es wird dir helfen, dein Ziel zu erreichen.

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