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

Question

我希望你能帮我解决我的代码..

我有一个动态添加数据的HTML表格。 所以，我想为它创建一个过滤器，以便同一个人采取的相同的测试被删除，每个人只显示一个并获得最高分。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以它应该只显示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

请参阅演示。如果您想添加一个复选框以显示其余分数，此代码对您没有帮助，您必须在渲染之前通过[name，test]对数据进行分组。因此您必须提供多个而不是只有一个表。结构可能是这样的：

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Test</th>
        <th>Scores</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td title="Name">John Doe</td>
        <td title="Test">Exam 1</td>
        <td>
            <table>
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Score</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>02/11/2017</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>02/11/2017</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<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>
<script type="text/babel">
    let highest = {};

    Array.from(document.querySelectorAll('table tbody tr')).forEach((exam) => {
        const get = (name) => {
            return exam.querySelector(`[title="${name}"]`).textContent;
        };
        var [name, test, score]=[get('Name'), get('Test'), parseInt(get('Score'))];
        let key = [name, test];
        if (highest[key] >= score) {
            exam.parentNode.removeChild(exam);
            return;
        }
        highest[key] = score;
    });


</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你似乎太复杂了。只需循环遍历表格主体中的行并收集名称，测试，分数及其所在的行。如果您不止一次遇到组合，请隐藏较低分数或显示较高分数并更新已保存的分数和行。

var rows = document.querySelector('table').tBodies[0].rows;
var seen = {};
[].forEach.call(rows, row => {
  var name  = row.cells[0].textContent,
      test  = row.cells[1].textContent,
      score = Number(row.cells[3].textContent);
  if (seen[name] && seen[name].hasOwnProperty(test)){
    if (seen[name][test].score > score) {
      row.style.display = 'none';
    } else {
      seen[name][test].row.style.display = 'none';
      seen[name][test] = {score: score, row: row};
    }
  } else {
    seen[name] = {[test]:{score: score, row: row}};
  }
})

<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">13</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>

在最近的一些浏览器中，NodeLists（例如行等HTMLCollections和 querySelectorAll 返回的那些）具有 forEach 方法，使其更简单

这也使用了计算属性名称，这可以避免，但需要多行代码。如果它们不受支持，可能也不是箭头功能。这两个问题都不容易被替换。

Answer 3

使用复选框按钮，您可以随意显示/隐藏。让我知道你不明白的是什么。

＆＃13;

＆＃13;

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();
  }
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;