如何在javascript中显示和隐藏表格行
如何在javascript中显示和隐藏表格行
提问于 2018-10-06 06:32:50
我在一个表中有很多行，我想显示前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>
非常感谢您抽出时间来查看或解决此问题:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-06 07:53:31
当您最初显示表时，需要将其限制为显示前十行。通过将迭代次数设置为最小值10或json.length，可以在for循环中执行此操作。
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;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52674029
复制相关文章
相似问题
腾讯云开发者
