как показать и скрыть строки таблицы в JavaScript - PullRequest
Новая
       39

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

0 голосов
/ 06 октября 2018

У меня много строк в таблице, я хочу показать первые 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: "josephkeller@twiist.com",
    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>

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

1 Ответ

0 голосов
/ 06 октября 2018

Когда вы изначально показываете свою таблицу, вам нужно ограничить ее, чтобы показать первые десять строк.Вы можете сделать это в цикле 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;

Для отображения следующих десяти строк при нажатии «Показать больше»вам нужно добавить прослушиватель события click к вашей кнопке.Когда событие вызывается, вы подсчитываете количество строк, находящихся в данный момент в таблице, и делаете цикл 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;
});
...