how to show and hide table's rows in 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 ? I want to do it in vanilla javascript (no jquery). here is the code of html,css and 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 (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. 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. The code below shows how this might be implemented; you would add it to your JavaScript function.

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;
});

how to show and hide table's rows in javascript

Question

1 answers

solution1
2 ACCPTED 2018-10-05 23:53:31

how to show and hide table's rows in javascript

Question

1 answers

solution1 2 ACCPTED 2018-10-05 23:53:31

solution1
2 ACCPTED 2018-10-05 23:53:31