Récupérer le numéro des lignes afficher à l'écran

**ridha11111** · 14/05/2020, 18h58

Bonjour;

il y a t'il une methode comment je peux recuperer seulement les numero des lignes afficher en ecran(et non pas tous les ligne de table) de table HTML en utilisant javaScript

Merci.

Ridha

**Doksuri** · 15/05/2020, 08h47

quelqu'un a compris ?

**javatwister** · 15/05/2020, 08h57

C'est l'idée de "récupérer" qui me perplexise...

**ridha11111** · 15/05/2020, 13h17

Envoyé par Doksuri

quelqu'un a compris ?

par exemple si un table contien 100 lignes mais en ecran je regarde seulement 20 Lignes et les autre ligne sont en dessous et il faut derouler le scrolle pour regarde les autre ligne .
en javvascript je veux seulement recuperer les numero de ligne qui je les regarde.

Merci.

Ridha

**Doksuri** · 15/05/2020, 14h44

j'espere avoir compris ton probleme...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>lignes visibles</title>
</head>
<body>
premiere ligne visible en rouge, derniere ligne visible en vert<br /><br /><br />
<table id="monTable" border="1">
    <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
    <tr><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</body>
<script>
    const rows = document.querySelectorAll('#monTable tr');
    window.addEventListener('scroll', checkVisibleRows);
    function checkVisibleRows() {
        const visiblesRows = [];
        rows.forEach((el, i) => {
            el.style.backgroundColor = '';
            if(el.getBoundingClientRect().top > window.screenY && el.getBoundingClientRect().top + el.getBoundingClientRect().height < window.screenY + window.innerHeight) {
                visiblesRows.push(i);
            }
        });
        rows[visiblesRows[0]].style.backgroundColor = 'red';
        rows[visiblesRows[visiblesRows.length-1]].style.backgroundColor = 'green';
        console.log(`lignes visibles de ${visiblesRows[0]} a ${visiblesRows[visiblesRows.length-1]}`);
    }
    checkVisibleRows();
</script>
</html>

**NoSmoking** · 15/05/2020, 16h40

Bonjour,

@ridha11111 :
on pourrait connaître le pourquoi d'une telle démarche !

@Doksuri :
pourquoi faire intervenir window.screenY dans ton test, cela fausse le résultat si l'on déplace la fenêtre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const r = el.getBoundingClientRect();
if (r.top > 0 &&
    r.bottom < window.innerHeight) {
    // ...
}

**ridha11111** · 17/05/2020, 16h19

Grand merci ça fonctionne .

Récupérer le numéro des lignes afficher à l'écran

JavaScript

Discussions similaires

Partager

Partager