javascript - div - Comment ajouter une barre de défilement à ma table dynamique?



avec jquery (2)

Si j'ai défini une table vide dans mon index.html :

<body>
<table width="800" border="0"  class="my-table">
     <tr>
     </tr>

</table>

</body>

Ensuite, j'ajoute row et columns à my-table en invoquant le code javascript suivant:

var myTable = $('.my-table');

var myArr=GET_FROM_SERVER //server returns an arry of object, myArr.length>50

for(var i=0; i<myArr.length)
myTable.append("<tr id="+i+">"
                      +" <td>"+myArr[i].name+"</td>"
                      +"<td>"+myArr[i].address+"</td>"                  
           +"</tr>");

myArr est un tableau d'objets obtenu à partir du serveur, la longueur de ce tableau pourrait être supérieure à 50.

J'ai réussi à tout cela, ma question est, comment puis-je ajouter une barre de défilement à cette table de sorte que s'il y a trop de lignes, l'utilisateur peut utiliser la barre de défilement pour vérifier le contenu de la table.

https://ffff65535.com


Du point de vue de l'interface utilisateur, il sera plus facile d'interagir avec une longue table si elle est paginée et non défilante. Le défilement peut entraîner certains comportements qui empêchent les utilisateurs handicapés d'interagir. Il est facile de cliquer sur un lien de la page suivante, pas toujours facile à faire défiler.

J'attaque les problèmes de table en utilisant une grille, et ma grille de choix est DataTables . Il vous donne la pagination, le filtrage, le tri, la commande et le chargement ajax du contenu avec la possibilité de faire défiler avec un en-tête fixe si vous êtes déterminé à suivre cette route. Vous pouvez même configurer un téléchargement à Excel, pdf, imprimante, etc et le style à la volée avec juste quelques ajouts. Tout peut être configuré avec quelques lignes simples de code. De loin, c'est le truc le meilleur et le plus rapide que j'utilise pour rendre rapidement accessible des données complexes à mes utilisateurs.


Je voudrais envelopper la table avec un div

<body> 

 <div style="overflow:scroll;height:80px;width:100%;overflow:auto">

    <table width="800" border="0"  class="my-table">
    <tr>      </tr>  
    </table>  

 </div>

</body> 




javascript-events