时间戳

首页 > 解决方案 > 如何在javascript中显示和隐藏表格的行

javascript - 如何在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: "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>

非常感谢您花时间寻找或解决它:)

标签： javascripthtmlcssjsonshow-hide

解决方案

当您最初显示您的表格时，您需要将其限制为显示前十行。您可以在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;

要在单击“显示更多”时显示接下来的十行，您需要向按钮添加单击事件侦听器。当事件被触发时，您计算表中当前的行数，并从该数字的索引到该数字 + 10进行for循环，为每一行添加相关数据。json下面的代码显示了如何实现它；您可以将它添加到您的 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;
});

推荐阅读