如何在 javascript 中显示和隐藏 table 的行

Question

我在 table 中有很多行，我想显示前 10 行并隐藏其他行，当我单击（显示更多按钮）时显示更多 10 行，每次我都这样做单击（显示更多），有人可以帮我处理代码吗？我想用 vanilla 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: ",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>

非常感谢您花时间查看或解决:)

Answer 1

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

要在单击 'Show More' 时显示接下来的十行，您需要向按钮添加单击事件侦听器。当事件被触发时，您计算 table 中当前的行数，并从该数字的 json 索引到该数字 + 10 执行 for 循环，添加相关数据对于每一行。下面的代码显示了这是如何实现的；你会把它添加到你的 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;
});

如何在 javascript 中显示和隐藏 table 的行

how to show and hide table's rows in javascript

html

javascript

css

json

show-hide