J'essaie de sélectionner les lignes de mon tableau lorsque l'utilisateur utilise les touches fléchées. Cela fonctionne bien comme vous pouvez le voir ci-dessous:

example

Comme vous pouvez le voir, la table est à l'intérieur d'un div avec

overflow:auto.

Mon problème est le suivant: je souhaite que la barre de défilement suive la ligne sélectionnée lorsque l'utilisateur atteint une ligne inférieure à la limite div.

Voici le violon:

https://jsfiddle.net/alinedanawara/4spzwvh6/1/

2
Marcelo Barganha 14 juil. 2015 à 04:49

2 réponses

Meilleure réponse

Vous pouvez essayer d'ajouter un scrollTop dans votre fonction de surbrillance pour garder l'élément en surbrillance en haut de la liste aussi longtemps que possible en fonction de votre variable tableIndex et de la hauteur d'une ligne:

$('#areaItens').animate({
    scrollTop: $('#data tbody tr:eq('+tableIndex+')').height() * tableIndex
}, 0); 

Cela garantira que le conteneur affiche l'élément en surbrillance. Vous pouvez jouer avec une démo ici.

1
Jonathan Michalik 14 juil. 2015 à 02:28

Vous pouvez faire quelque chose comme ça. Faites défiler vers le haut lorsque l'élément en surbrillance passe sous la fenêtre.

var parent = $("#areaItens");
var currentEl = $('#data tbody tr:eq(' + tableIndex + ')');
if (currentEl.offset().top > parent.height()) {
  parent[0].scrollTop = currentEl[0].offsetTop;
}
if (currentEl.offset().top < 0) {
  parent[0].scrollTop = currentEl[0].offsetTop - parent.height() + $('#data tbody tr').first().height();
  }
}

Voici une démonstration de https://jsfiddle.net/4spzwvh6/3/

Si vous voulez que la cellule en surbrillance soit toujours en haut, cela peut être fait comme ceci

var parent = $("#areaItens");
var currentEl = $('#data tbody tr:eq(' + tableIndex + ')');
parent[0].scrollTop = currentEl[0].offsetTop;

Voici une démonstration du https://jsfiddle.net/4spzwvh6/4/ ci-dessus

1
Dhiraj 14 juil. 2015 à 02:53