javascript - 如何使用 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>

　

我应该如何在列上聚合这个表？

对于此示例，按第一列聚合表，以及与表中该键相关的最后一个值。

标签： javascripthtml

Answer 1

好吧，我并没有真正了解您的过滤要求，但我理解的是您要根据某些要求进行过滤。所以总是尝试在 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>