个人中心
gpt4 book ai didi

javascript - 如何在javascript中显示和隐藏表格行

转载 作者：太空宇宙 更新时间：2023-11-04 01:03:37 24 4
gpt4 key购买 nike

我在表格中有很多行，我想显示前 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: "$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>

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

最佳答案

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

要在单击“显示更多”时显示接下来的十行，您需要向按钮添加一个单击事件监听器。当事件被触发时，您计算表中当前的行数，并从该数字的 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 - 如何在javascript中显示和隐藏表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52674029/

24 4 0
文章推荐： c - 在 C 中，为什么我们需要将 char* 转换为 void？
文章推荐： node.js - 带有 cookie 的 ExpressJS session
文章推荐： c - 当我从函数中更改它时，为什么 `src` 没有更改？
文章推荐： css - 两个 block 之间的边界半径
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com