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

Question

I have many rows in a table, I want to show the first 10 rows and hide the other rows and when I click the (show more button) shows more 10 rows and keep doing it everytime I click on (Show More), can someone help me with the code ? 我的表中有很多行，我想显示前10行并隐藏其他行，当我单击（显示更多按钮）显示更多10行并在每次单击（显示更多）时继续这样做时，有人用代码帮我吗？ I want to do it in vanilla javascript (no jquery). 我想在香草javascript（没有jquery）中做到这一点。 here is the code of html,css and javascript 这是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>

thank you very much for taking the time for looking or resolving it :) 非常感谢您抽出宝贵的时间来寻找或解决它:)

Answer 1

When you initially show your table you need to limit it to show the first ten rows. 最初显示表时，您需要将其限制为显示前十行。 You can do this within your for loop, by setting the number of iterations to the minimum of either 10 or json.length . 您可以在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;

To show the next ten rows when you click 'Show More' you need to add a click event listener to your button. 要在单击“显示更多”时显示接下来的十行，您需要在按钮上添加click事件监听器。 When the event is fired you count the number of rows currently in the table, and do a for loop from the json index of that number to that number + 10, adding the relevant data for each row. 触发该事件时，您需要计算表中当前的行数，并从该数字的json索引到该数字+ 10进行for循环，并为每行添加相关数据。 The code below shows how this might be implemented; 下面的代码显示了如何实现。 you would add it to your JavaScript function. 您可以将其添加到您的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中显示和隐藏表格的行

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-10-05 23:53:31

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-10-05 23:53:31

解决方案1
2 已采纳 2018-10-05 23:53:31