循环遍历表并使用 jquery 删除重复项答案

【问题标题】：Loop through table and remove duplicate with jquery循环遍历表并使用 jquery 删除重复项
【发布时间】：2017-12-20 11:10:12
【问题描述】：

我有一张有日期的桌子。我想遍历表并输出没有重复的数据。我怎样才能做到这一点？

结果应该是：

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>

【问题讨论】：

标签： javascript loops html-table duplicates

【解决方案1】：

要遍历表并输出不重复的数据，可以使用数组来保存和验证数据。

var table = document.getElementsByClassName('date');
var data = [];
                    for (i=0; i < table.length; i++){
                if (data.indexOf(table[i].innerHTML) > -1) {
                  console.log(table[i].innerHTML);
                } else {
                  data.push(table[i].innerHTML);
                }
        }

【讨论】：

【解决方案2】：

解决方案是遍历表 rows 并验证是否已找到 year。

为此，您可以使用名为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>

【讨论】：

@Celal，不要忘记接受答案以帮助其他人。