如何使用 Javascript 從 html 表中選擇唯一的 {key, last value}

Question

我有一個 html 表喜歡：

<table border="1">
　<tr>
　<td>apple</td>
　<td>10</td>
　</tr>
　<tr>
　<td>apple</td>
　<td>7</td>
　</tr>
　<tr>
　<td>banana</td>
　<td>8</td>
　</tr>
　<tr>
　<td>apple</td>
　<td>9</td>
　</tr>
　<tr>
　<td>cat</td>
　<td>11</td>
　</tr>
　<tr>
　<td>banana</td>
　<td>7</td>
　</tr>
　<tr>
　<td>cat</td>
　<td>2</td>
　</tr>
</table>

我應該如何在列上聚合這個表？

對於此示例，按第一列聚合表，以及與表中該鍵相關的最后一個值。

Answer 1

創建了一個參考這篇文章的方法。 希望這會有所幫助。

 function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length - 1; i++) { //Excluding last row 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"; } } } }

 Search First Columns <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search all table" title="Type in a name" /> <table id="myTable" border="1"> <tr> <td>apple</td> <td>10</td> </tr> <tr> <td>apple</td> <td>7</td> </tr> <tr> <td>banana</td> <td>8</td> </tr> <tr> <td>apple</td> <td>9</td> </tr> <tr> <td>cat</td> <td>11</td> </tr> <tr> <td>banana</td> <td>7</td> </tr> <tr> <td>cat</td> <td>2</td> </tr> </table>

Answer 2

嗯，我沒有真正了解您的過濾要求，但我理解的是您要根據某些要求進行過濾。 所以總是嘗試在 JS 端添加過濾邏輯，而不是在 HTML 上。 因此，您可以像下面的代碼示例一樣在 JS 中維護它：

 $(document).ready(function() { this.json = { "Students": [{ "id": "1", "hometown": "London", "gender": "Male", "GPA": "8", "name": "Lee", }, { "id": "2", "hometown": "NY", "gender": "Male", "GPA": "9", "name": "Shaldon", }, { "id": "3", "hometown": "Paris", "gender": "Female", "GPA": "7", "name": "Julie", } ] }; this.renderTable = function(Students) { var tbody = document.getElementById('tbody'); tbody.innerHTML = ""; for (var i = 0; i < Students.length; i++) { var tr = "<tr>"; tr += "<td>ID</td>" + "<td>" + Students[i].id + "</td></tr>"; tr += "<td>HomeTown</td>" + "<td>" + Students[i].hometown + "</td></tr>"; tr += "<td>Gender</td>" + "<td>" + Students[i].gender + "</td></tr>"; tr += "<td>GPA</td>" + "<td>" + Students[i].GPA + "</td></tr>"; tr += "<td>NAME</td>" + "<td>" + Students[i].name + "</td></tr>"; tr += "<hr>"; tbody.innerHTML += tr; } } this.renderTable(this.json.Students); console.log(this.json.Students); //code for filtering// this.Filter = function() { var search = document.getElementById('search'); var category = document.getElementById('category'); var filteredObj = this.json.Students; filteredObj = $.map(this.json.Students, function(val, key) { if (search.value === val[category.value]) return val; }); filteredObj.length>0 ? this.renderTable(filteredObj) : this.renderTable(this.json.Students); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <p></p> <input id="search" type="search"> <select id = "category"> <option value = "select">select</option> <option value = "id">ID</option> <option value = "hometown">HomeTown</option> <option value = "gender">Gender</option> <option value = "GPA">GPA</option> <option value = "name">NAME</option> </select> <button onclick="Filter()">Filter</button> <table> <tbody id="tbody"></tbody> </table>