jquery Festlegen der Tabellenzeilenfokus

Question

Der Versuch, den Fokus basierend auf dem Benutzerklick auf eine bestimmte Tabellenzeile zu verschieben.

<script> 
    $(function(){ 
     $('.filter').click(function(){ 
      var id = $(this).attr('id'); 
      var row = "post_"+id; 

      //alert(row) == post_1234 

      $('#'+row).find('tr').focus(); 
     }); 
}); 
</script> 

<table id='activity'> 
    <tr id='1234' class='filter'><td>Some Data</td></tr> 
    <tr id='1234' class='filter'><td>Some Data</td></tr> 
    <tr id='1234' class='filter'><td>Some Data</td></tr> 
</table> 

//Tons of data that scrolls down page quite a distance.. 

<table> 
<tr id='post_1234'><td>...</td></tr> 
<tr id='post_1235'><td>...</td></tr> 
<tr id='post_1236'><td>...</td></tr> 
</table> 

Ich habe versucht:

$('.filter').click(function(){ 
    var id = $(this).attr('id'); 
    var row = "post_"+id; 

    //alert(row) == post_1234 

    $('#'+row).find('tr').focus(); 
}); 

nichts tut

$('#'+row).focus(); 

auch nichts tut.

Die Warnung wird korrekt ausgelöst, wenn die richtige ID angezeigt wird.

als Test ich dies tat:

$('#'+row).find('td').addClass('someClass'); 

und hinzugefügt richtig Klasse.

Was fehlt mir?

Answer 1

Möglicherweise müssen Sie das in Tabelle wie unten oder focus direkt finden. Ich habe den Fokus auf CSS geändert, um die Ausgabe zu sehen.

$('.filter').on('click', function() { 
 
    var id = $(this).attr('id'); 
 
    var row = "post_" + id; 
 
    console.log(row); 
 
    // $("table").find($("#" + row).css("color", "red")); //Use this 
 
    $("#" + row).css("color", "red"); //Or this 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='activity'> 
 
    <tr id='1234' class='filter'> 
 
    <td>Some Data</td> 
 
    </tr> 
 
    <tr id='1234' class='filter'> 
 
    <td>Some Data</td> 
 
    </tr> 
 
    <tr id='1234' class='filter'> 
 
    <td>Some Data</td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr id='post_1234'> 
 
    <td>...</td> 
 
    </tr> 
 
    <tr id='post_1235'> 
 
    <td>...</td> 
 
    </tr> 
 
    <tr id='post_1236'> 
 
    <td>...</td> 
 
    </tr> 
 
</table>