javascript - 查找并仅显示表中的最高分数

Question

我希望你能帮助我编写代码..

我有一个包含动态添加数据的 HTML 表格。因此，我想为其创建一个过滤器，以便删除同一人进行的相同测试，并仅显示每人一个测试并仅获得最高分。

<table class="test-table">
  <thead>
    <tr role="row">
      <th> Name </th>
      <th> Test </th>
      <th> Date </th>
      <th> Score </th>
  </thead>
  <tbody>
    <tr role="row">
      <td title="Name">John Doe</td>
      <td title="Test">Exam 1</td>
      <td title="Date">02/11/2017</td>
      <td title="Score">8</td>
    </tr>
    <tr role="row">
      <td title="Name">John Doe</td>
      <td title="Test">Exam 1</td>
      <td title="Date">02/11/2017</td>
      <td title="Score">3</td>
    </tr>
    <tr role="row">
      <td title="Name">Jane Doe</td>
      <td title="Test">Exam 1</td>
      <td title="Date">02/11/2017</td>
      <td title="Score">8</td>
    </tr>
    <tr role="row">
      <td title="Name">Jane Doe</td>
      <td title="Test">Exam 2</td>
      <td title="Date">02/11/2017</td>
      <td title="Score">8</td>
    </tr>
  </tbody>
</table>

因此它应该只显示 Jonh Doe 的考试 1，得分为 8。但要显示 Jane Doe 的两项考试，因为这是两次不同的考试..

现在，我有一个搜索重复项的脚本，但我目前陷入困境..

var nTds = document.querySelectorAll('[title="Name"]'),
  tTds = document.querySelectorAll('[title="Test"]'),
  test = [],
  names = [];

for (var i = 0; i < nTds.length; i++) {
  names.push(nTds[i].textContent);
}

for (var i = 0; i < tTds.length; i++) {
  test.push(tTds[i].textContent);
}

const nCount = names =>
  names.reduce((a, b) =>
    Object.assign(a, {
      [b]: (a[b] || 0) + 1
    }), {})

const tCount = test =>
  test.reduce((a, b) =>
    Object.assign(a, {
      [b]: (a[b] || 0) + 1
    }), {})

const duplicates = dict =>
  Object.keys(dict).filter((a) => dict[a] > 1)

console.log(duplicates(tCount(test)))
console.log(duplicates(nCount(names)))

非常感谢!任何帮助将不胜感激..

Answer 1

使用复选框按钮，您可以随意显示/隐藏。有什么不明白的请告诉我。

function duplicate_hide()
{
  var table_rows = document.querySelectorAll('tbody tr');

  var unique = {};
  var selection = ["Name", "Test", "Score"];

  for (row of table_rows)
  {
    var temp = [];
    for (select of selection)
    {
      temp.push(row.querySelector(`td[title="${select}"]`));
    }
  
    // Destructuring assignment
    var [the_name, the_test, the_score] = temp;

    the_name = the_name.innerHTML;
    the_test = the_test.innerHTML;
    the_score = the_score.innerHTML == " " ? 0 : the_score.innerHTML;

    if (the_name in unique && the_test in unique[the_name])
    {
      //same test, saved score is lower than current score, hide previous row
      if (+unique[the_name][the_test].score < +the_score)
      {
        unique[the_name][the_test].row.className = "hidden";
        unique[the_name][the_test].score = the_score;
        unique[the_name][the_test].row = row;
      }
      else
      {
        row.className = "hidden";
      }
    }
    else
    {
      // Create new object if it doesn't exist on name
      if (!(the_name in unique))
      {
        unique[the_name] = {};
      }
      unique[the_name][the_test] = {score: the_score, row};
    }
  }
}

function duplicate_show()
{
  var table_rows = document.querySelectorAll('tbody tr');
  for (row of table_rows)
  {
    row.className = "";
  }
}

function duplicate_check(event)
{
  if (event.target.checked)
  {
    duplicate_hide();
  }
  else
  {
    duplicate_show();
  }
}

.hidden {
  display: none;
}

<div>
  <input type="checkbox" onchange="duplicate_check(event)" /> Toggle Me
</div>

<table class="test-table">
  <thead>
    <tr role="row">
      <th> Name </th>
      <th> Test </th>
      <th> Date </th>
      <th> Score </th>
      <th> something else </th>
  </thead>
  <tbody>
    <tr class='odd'>
       <td title="Name">John Doe</td>
	   <td title="Test">exam 1</td>
	   <td title="Date">03/08/2017</td>
	   <td title="Score">4</td>
	</tr>
		
    <tr class='even'>
	   <td title="Name">John Doe</td>
	   <td title="Test">exam 1</td>
	   <td title="Date">03/08/2017</td>
	   <td title="Score">5</td>
	</tr>
		
	<tr class='odd'>
	   <td title="Name">John Doe</td>
	   <td title="Test">exam 2</td>
	   <td title="Date">03/08/2017</td>
	   <td title="Score">7</td>
	</tr>
		
	<tr class='even'>
	    <td title="Name">Wendy Doe</td>
	    <td title="Test">exam 1</td>
	    <td title="Date">03/08/2017</td>
	    <td title="Score">7</td>
	</tr>
		
	<tr class='odd'>
	    <td title="Name">Wendy Doe</td>
	    <td title="Test">exam 1</td>
	    <td title="Date">02/11/2017</td>
	    <td title="Score">4</td>
	</tr>
		
	<tr class='even'>
	    <td title="Name">Wendy Doe</td>
	    <td title="Test">exam 1</td>
	    <td title="Date">02/11/2017</td>
	    <td title="Score">3</td>
	</tr>
  </tbody>
</table>