How to select unique {key, last value} from html table with Javascript

Question

I have a html table likes:

<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>

How should I aggregate this table on a column?

For this example, aggregate table by column one, and the last value related to that key in the table.

Answer 1

Created a method referring to this post. Hope this will be helpful.

 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

Well, I didn't truly understand your filtration requirement, but what I understood is you want to filter based on certain requirements. So always try to add filtration logic at JS side, not on the HTML. Hence you can maintain this at JS like below code example:

 $(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>