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

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

quelqu'un a compris ?

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

Citation:

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

j'espere avoir compris ton probleme...

Code:

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>

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:

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

Grand merci ça fonctionne .