Как показать и скрыть строки таблицы в javascript

У меня много строк в таблице, я хочу показать первые 10 строк и скрыть другие строки, и когда я нажимаю кнопку (Показать больше), показывает больше 10 строк и продолжаю делать это каждый раз, когда я нажимаю (Показать больше), может кто-нибудь помочь мне с кодом? Я хочу сделать это на ванильном javascript (без jquery). вот код html, css и javascript

let json = [
  {
   //there are many more, but I only included one to not make it longer
   
    _id: "5af5cf0270d455a211200d4c",
    isActive: true,
    balance: "$3,507.97",
    picture: "http://placehold.it/32x32",
    age: 24,
    eyeColor: "brown",
    name: "Joseph Keller",
    gender: "male",
    company: "TWIIST",
    email: "[email protected]",
    phone: "+1 (827) 592-2357",
    address: "661 Terrace Place, Elliott, Ohio, 9927",
    about:
      "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
    registered: "2014-12-10T07:18:10 +02:00",
    latitude: -84.359436,
    longitude: 156.008804,
    tags: [
      "excepteur",
      "eiusmod",
      "laboris",
      "fugiat",
      "minim",
      "dolor",
      "qui"
    ],
    friends: [
      {
        id: 0,
        name: "Shields Terrell"
      },
      {
        id: 1,
        name: "Hilary Bruce"
      },
      {
        id: 2,
        name: "Lorraine Torres"
      }
    ]
  }
  ];

let _html = `<tr class = "header">
            <th >Picture</th>
            <th >Name</th>
            <th >Age</th>
            <th >Active</th>
            <th >Email</th>
            <th >Phone</th>
            <th >Company</th>
            <th >Balance</th>
            </tr>`;

for (let i = 0; i < json.length; i++) {
  _html += `<tr>
            <td><img src = "${json[i].picture}" /></td>
            <td>${json[i].name}</td>
            <td>${json[i].age}</td>
            <td>${json[i].isActive}</td>
            <td>${json[i].email}</td>
            <td>${json[i].phone}</td>
            <td>${json[i].company}</td>
            <td>${json[i].balance}</td>
        </tr>`;
}

myTable.innerHTML = _html;

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

#myInput {
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#button {
  display: block;
  margin-top: 5%;
  margin-bottom: 3%;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}

h1 {
  text-align: center;
}

<!doctype html>
<html>

<head>
    <meta charset = "utf-8">
    <title>Table</title>
    <link rel = "stylesheet" href = "./assets/css/style.css">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin = "anonymous">
    <link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

</head>

<body>
    <div class = "container">
        <h1>Search for employees</h1>
        
        <input class = "container" type = "text" 
        id = "myInput" onkeyup = "myFunction()" 
        placeholder = "Example: Mauro, etc.">
        
        <div class = "table-responsive{-sm|-md|-lg|-xl}">
            <table class = "table" id = "myTable"></table>
        </div>
        
        <a href = "#" class = "btn btn-primary btn-lg center"
        role = "button" id = "button">Show More</a>
        
    </div>
</body>
<script src = "./assets/js/json.js"></script>


<script src = "//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

</html>

большое спасибо за то, что нашли время на поиск или решение :)

javascript html css json show-hide

06.10.2018 00:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы изначально показываете свою таблицу, вам нужно ограничить ее отображением первых десяти строк. Вы можете сделать это в своем цикле for, установив минимальное количество итераций 10 или json.length.

for (let i = 0; i < Math.min(10,json.length); i++) {
    _html += '<tr>
             <td><img src = "${json[i].picture}" /></td>
             <td>${json[i].name}</td>
             <td>${json[i].age}</td>
             <td>${json[i].isActive}</td>
             <td>${json[i].email}</td>
             <td>${json[i].phone}</td>
             <td>${json[i].company}</td>
             <td>${json[i].balance}</td>
             </tr>';
}
document.getElementById("myTable").innerHTML = _html;

Чтобы отобразить следующие десять строк, когда вы нажмете «Показать больше», вам необходимо добавить прослушиватель событий щелчка к вашей кнопке. Когда событие запускается, вы подсчитываете количество строк, находящихся в данный момент в таблице, и выполняете цикл for от индекса json этого числа до этого числа + 10, добавляя соответствующие данные для каждой строки. В приведенном ниже коде показано, как это можно реализовать; вы бы добавили его в свою функцию JavaScript.

let button = document.getElementById("button");
button.addEventListener("click", function() {
    let table = document.getElementById("myTable"),
        trs = table.getElementsByTagName("tr").length-1, // counts number of rows
        newHtml = '';
    for (let i = trs; i < Math.min(trs+10,json.length); i++) {
        // iterate for ten rows or until the end of json, whichever happens first
        newHtml += '<tr>
            <td><img src = "${json[i].picture}" /></td>
            <td>${json[i].name}</td>
            <td>${json[i].age}</td>
            <td>${json[i].isActive}</td>
            <td>${json[i].email}</td>
            <td>${json[i].phone}</td>
            <td>${json[i].company}</td>
            <td>${json[i].balance}</td>
        </tr>';
    }

    // once you've loaded all the rows, add them to the table
    table.innerHTML += newHtml;
});

06.10.2018 01:53

Другие вопросы по теме

#section vs section: nth-of-type (1) при выборе Css

Фиксированный элемент, использующий flexbox, перемещается в мобильном Safari iPhone из-за исчезновения меню при прокрутке

Сохраните диаграммы Google в изображения и откройте их в новой вкладке

Аудио-тег html5-плеера icecast stream

Как создать матричную группу флажков с пробелами в некоторых ячейках в блестящем цвете?

Возьмите самый большой размер div и сделайте все одинаковыми

Порядок ранжирования mySQL по сумме значений в таблице, имя которой указано в другой таблице

Почему размер изображения в моем плавающем элементе не меняется?

Как заставить HTML-div быстро перемещаться вправо (менее 1 секунды) и исчезать?

Изменить положение адаптивного бокового меню

Как показать и скрыть строки таблицы в javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы