Définir le focus à la fin de la table à l'intérieur de div lors de l'ajout d'une nouvelle ligne

Question

J'ai une table dans une div avec une hauteur définie, lorsque la table est plus grande que la div la barre de défilement apparaît. Le problème est que si la barre de défilement de la div est en haut, laissant l'autre rangée en bas cachée, et l'utilisateur appuie sur le bouton pour ajouter une nouvelle ligne, cette ligne est ajoutée au bas de la table, donc vous Je ne peux pas le voir.

Y at-il un javascript, un vbscript ou un css pour définir le focus sur la ligne qui a été créée afin qu'il soit visible lors de l'ajout?

Ceci est le code où la fonction pour ajouter une nouvelle ligne serait appelée.

strRow = strRow + "<div> 
     <input ID='AddRowTableNew_" + cstr(newrow.id) + "' type='button' 
     value='Add New Row' 
     onclick='vbscript:AddNewRow 0," + cstr(newRow.id)+ "'/> 
    </div>" 

Toute aide serait appréciée. PD: J'aurais besoin que ce soit sur VBScript ou JavaScript, pas de JQuery s'il vous plait.

Merci.

Answer 1

Essayez Element.scrollIntoView();. Cela fonctionne dans Firefox, IE6 +, Opera et Google Chrome/Safari.

Vous pouvez également fournir une valeur booléenne à la fonction qui spécifiera où pour faire défiler l'élément:

// Align the element with the top of the parent 
Element.scrollIntoView(); 
Element.scrollIntoView(true); 

// Align the element with the bottom of the parent 
Element.scrollIntoView(false); 

EDIT: MDC documentation pour scrollIntoView un exemple

Pour faire défiler vers le bas, vous pourriez aussi vient de mettre scrollTop propriété de l'élément égal à la scrollHeight propriété:

Element.scrollTop = Element.scrollHeight; 

Answer 2

Try this ...

var div = document.getElementById('the_div'); 
div.scrollTop = div.scrollHeight; 

Hope it helps.