Question

我想在滚动页面时从表中获取所有可见行的索引。我在html表中有超过500行，因此在页面滚动中，我想获取表的可见行。

$("#mainDiv").scroll(function () {
    var rows = $(this).find('table tbody tr');
    var offset = $(this).scrollTop();
    var visibleIndex = 0;
    var height = 0;
    rows.each(function (index, item) {
        if (offset == 0) {
            height = 0;
            visibleIndex = 0
            return false;
        }
        height += $(this).height();
        if (height > offset) {
            visibleIndex = index + 1;
            height = 0;
            return false;
        }
    })
    console.log(visibleIndex);
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="mainDiv" style="height:100px;width:100%;overflow-y: scroll">
<table> 
<thead>
<tr><th>A</th> 
<th>Heading</th> 
<th>Row</th> 
<th>Row1</th>
<th>Row2</th>
<th>Row3</th>
</tr> 
</thead>
<tbody>
<tr> 
<td>The first1</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second2</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first3</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second4</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first5</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second6</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first7</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second8</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first9</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second10</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first11</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second12</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first13</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second14</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first15</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second16</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first17</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second18</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 <tr> 
<td>The first</td>
 <td>row of</td>
 <td>table data</td>
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr> 
 <tr> <td>The second</td> 
 <td>row of</td> 
 <td>table data</td> 
 <td>The first</td>
 <td>row of</td>
 <td>table data</td>
 </tr>
 </tbody>
 </table>
 </div>
</body>
<script>
</script>
</html>

请给我一些想法，以使可见的行滚动显示。当我滚动页面时，我想从表中获取所有可见行的索引。我在html表中有超过500行，因此在页面滚动中，我想获取表的可见行。

如何从滚动表中获取可见行的索引

0 个答案: