Autoscrolling einer Tabelle

Question

Ich arbeite an einer Tabelle, die, je nach Benutzerdaten, zu breit sein kann, um auf das Display zu passen, so dass wir es "overflow: auto;"

Ich möchte in der Lage sein, automatisch die Tabelle zu scrollen, so dass eine bestimmte benannte Zelle - sagen wir: ('cell_' + row + '_' + col) sichtbar ist.

Wie bekomme ich das? Ich habe hier ein paar Vorschläge gesehen, die jQuery betreffen, aber ich konnte sie nicht dazu bringen, irgendetwas zu tun.

Ich brauche keine glatte Animation, in der Tat würde ich lieber, es gab keine, wie ich finde, es ist eine Ablenkung für die Benutzer.

Answer 1

Check out this Geige:

JavaScript

var container = $(".narrow"); 
container.scrollTop(0); 
container.scrollLeft(0); 
container.scrollTop($("#cell_3_3").offset().top - container.offset().top); 
container.scrollLeft($("#cell_3_3").offset().left - container.offset().left); 

HTML

<div class="narrow"> 
    <table> 
    <tr> 
     <td id="cell_1_1">1. Content ...</td> 
     ..... 
    </tr> 
    ..... 
    </table> 
</div> 

CSS

.narrow { 
    max-width: 100px; 
    max-height: 200px; 
    overflow: auto; 
} 

UPDATE 1

Neu fiddle besser zu demonstrieren. Looping durch alle Zellen.