【发布时间】：2020-11-21 10:50:53
【问题描述】：
我一遍又一遍地遇到问题。我有一个非常可靠的 HTML 表格功能，但是因为它会包含很多数据行，所以我也想要一种简化功能的方法。我想对具有相同“程序字段”的数据行进行分组，并创建一个展开/折叠函数，该函数将隐藏/显示具有相同程序字段的所有行。
这是我的表格输出的示例。例如，有两个程序以 X 作为值我想创建一个写有“x”的行并能够单击它，它会下拉所有具有“x”值的行，如果我再次单击它将折叠他们。
这个 YouTube 视频几乎正是我想要完成的，但是很难理解，因为这个人的所有数据都是硬编码/静态的，因为我的数据是通过请求提取的。
这是我的代码：
<script src="/jquery-3.3.1.min.js"></script>
<script>
var webAppUrl = _spPageContextInfo.webAbsoluteUrl;
function loadData(source, url) {
return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
window.addEventListener("load", function () {
Promise.all([
loadData("xDeliverables", "_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
loadData("yDeliverables", "_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
loadData("zDeliverables", "_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
])
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2,r3);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"<td><strong>Deliverable</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].Deliverable + "</td>";
tableContent += "</tr>";
}
$("#deliverables").append(tableContent);
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
function searchTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("deliverablesTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<style>
#myInput {
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png');
background-position: left center;
background-repeat: no-repeat;
background-size: 30px;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#deliverablesTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#deliverablesTable th, #deliverablesTable td {
text-align: center;
padding: 12px;
}
#deliverablesTable tr {
border-bottom: 1px solid #ddd;
}
#deliverablesTable tr:nth-child(even) {
background-color: #dddddd;
}
#deliverablesTable tr.header, #deliverablesTable tr:hover {
background-color: #f1f1f1;
}
</style>
<div id="EmployeePanel">
<table id='deliverablesTable' style="width: 100%;" border="1 px">
<tr>
<td>
<div id="deliverables" style="width: 100%"></div>
</td>
</tr>
</table>
</div>
【问题讨论】：
标签： javascript html jquery ajax sharepoint