Как добавить полосу прокрутки на таблицу (а также применить условие к полосе прокрутки) в javascript? - PullRequest
Новая
       12

Как добавить полосу прокрутки на таблицу (а также применить условие к полосе прокрутки) в javascript?

1 голос
/ 26 февраля 2020

Здесь у меня есть 10 Json объектов. Я пытаюсь добавить полосу прокрутки на таблицу с overflow:auto Но вот поворот: то, что я точно хочу, это момент, когда моя полоса прокрутки достигнет дна, я хочу поставить условие, что-то вроде верхних 10 значений повторяется снова, но только когда полоса прокрутки достигает дна и я хочу, чтобы она бесконечно l oop.

Что я делал до сих пор? Здесь я помещаю 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"

  }
  ]

Теперь я создал свою таблицу, но я также хочу изменить ее, я просто хочу 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>");

Я надеюсь, что вы ребята понимают что я хотел спросить. Заранее спасибо:)

1 Ответ

2 голосов
/ 26 февраля 2020 

.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>

Смотрите фрагмент здесь. Используя это, вы выберете событие (конец прокрутки) и затем добавите свой код в соответствии с вашими требованиями. Дайте мне знать, если у вас есть 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>
...