如何在 javascript 中在表格上添加滚动条（并在滚动条上应用条件）？

Question

在这里，我有 10 个 Json 对象。我正在尝试使用overflow:auto 在桌子上添加一个滚动条但这里有一个转折，我真正想要的是我的滚动条触到底部的那一刻，我想设置一个条件，比如上面的 10 个值再次重复，但是仅当滚动条到达底部并且我希望它处于无限循环中时。

到目前为止我做了什么 这里我将 JSON 对象放入数组中。

var response = [
  {
     "CategoryName":"Beverages",
     "ProductName":"Steeleye Stout"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Laughing Lumberjack Lager"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Lakkalik\u00f6\u00f6ri"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Guaran\u00e1 Fant\u00e1stica"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Ipoh Coffee"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chang"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chartreuse verte"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Ipoh Coffee"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chai"
  },
  {
     "CategoryName":"Beverages",
     "ProductName":"Chang"

  }
  ]

现在我创建了 i 表，但我也想对其进行更改，我只想要 5 个条目。接下来的五个，我想从滚动条访问。

var key = [];

       document.write("<table border==\"1\"><tr>");
       for (key in response[0]) {
       document.write('<td>' + '<b>' + key + '</b>' + '</td>');
        }

        document.write("</tr>");
        for (var i = 0; i < response.length; i++) {
        document.write('<tr>');
        for (key in response[i]) {

             document.write('<td>' + response[i][key] + '</td>'); 
         }
        document.write('</tr>');
          }
        document.write("</table>");

我希望你们明白我想问什么。在此先感谢:)

Answer 1

.scrobale table {margin: 0;padding: 0;display: block;max-width: 100%;}
.scrobale {
    max-height: 200px;
    height: auto;
    display: block;
    overflow: auto;
    max-width: 300px;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

.scrobale {
    max-height: 200px;
    height: auto;
    display: block;
    overflow: auto;
}
</style>

</head>

<body>
    <!-- Swiper -->


</body>

<script>
    var response = [
        {
            "CategoryName": "Beverages",
            "ProductName": "Steeleye Stout"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Laughing Lumberjack Lager"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Lakkalik\u00f6\u00f6ri"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Guaran\u00e1 Fant\u00e1stica"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chartreuse verte"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chai"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"

        }
    ]

    var key = [];

    document.write("<div class='scrobale'><table border==\"1\"><tr>");
    for (key in response[0]) {
        document.write('<td>' + '<b>' + key + '</b>' + '</td>');
    }

    document.write("</tr>");
    for (var i = 0; i < response.length; i++) {
        document.write('<tr>');
        for (key in response[i]) {

            document.write('<td>' + response[i][key] + '</td>');
        }
        document.write('</tr>');
    }
    document.write("</table></div>");
</script>


<script>
    jQuery(function($) {
        var contentvalue = $(".scrobale table tbody").html();
    $('.scrobale').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            // alert('add your table tr here');
            $(".scrobale table tbody").prepend(contentvalue);
        }
    })
});
</script>

</html>

在此处查看 sn-p。通过使用它，您将选择事件（滚动结束），然后根据您的要求添加代码。如果您有任何 qns，请告诉我。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>

.scrobale {
    max-height: 200px;
    height: auto;
    display: block;
    overflow: auto;
}
</style>

</head>

<body>
    <!-- Swiper -->


</body>

<script>
    var response = [
        {
            "CategoryName": "Beverages",
            "ProductName": "Steeleye Stout"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Laughing Lumberjack Lager"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Lakkalik\u00f6\u00f6ri"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Guaran\u00e1 Fant\u00e1stica"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chartreuse verte"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Ipoh Coffee"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chai"
        },
        {
            "CategoryName": "Beverages",
            "ProductName": "Chang"

        }
    ]

    var key = [];

    document.write("<div class='scrobale'><table border==\"1\"><tr>");
    for (key in response[0]) {
        document.write('<td>' + '<b>' + key + '</b>' + '</td>');
    }

    document.write("</tr>");
    for (var i = 0; i < response.length; i++) {
        document.write('<tr>');
        for (key in response[i]) {

            document.write('<td>' + response[i][key] + '</td>');
        }
        document.write('</tr>');
    }
    document.write("</table></div>");
</script>


<script>
    jQuery(function($) {
    $('.scrobale').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('add your table tr here');
        }
    })
});
</script>

</html>