javascript - 遍历表并使用jquery删除重复项

我有一张桌子有一些约会。我想遍历表并输出没有重复的数据。我该如何实现？

结果应为：

2017
2018
2019

var table = document.getElementsByClassName('date');
for (i=0; i < table.length; i++){
    console.log(table[i].innerHTML);
}


 

<table id="myTable" class="table">
    <tr>
        <td class="date">2017</td>
    </tr>
   	<tr>
    	<td class="date">2017</td>
    </tr>
   	<tr>
    	<td class="date">2018</td>
    </tr>
   	<tr>
    	<td class="date">2018</td>
    </tr>
    <tr>
    	<td class="date">2018</td>
    </tr>
   	<tr>
    	<td class="date">2019</td>
    </tr>
    <tr>
    	<td class="date">2019</td>
    </tr>
    <tr>
    	<td class="date">2019</td>
    </tr>
</table>

最佳答案

解决方案是遍历表行并验证是否已找到年份。

为此，您可以使用名为var seen={}的JavaScript字典。如果已经找到年份，则必须设置seen[year]=true。否则，您必须通过将display属性设置为none来隐藏行。

var seen = {};
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (seen[td.textContent]) {
        tr[i].style.display = "none";
    } else {
        seen[td.textContent]=true;
    }
}

<table id="myTable" class="table">

	<tr>
		<td class="date">2017</td>
	</tr>

	<tr>
		<td class="date">2017</td>
	</tr>

	<tr>
		<td class="date">2018</td>
	</tr>

	<tr>
		<td class="date">2018</td>
	</tr>
	<tr>
		<td class="date">2018</td>
	</tr>

	<tr>
		<td class="date">2019</td>
	</tr>
	<tr>
		<td class="date">2019</td>
	</tr>
	<tr>
		<td class="date">2019</td>
	</tr>

</table>