循环遍历表并使用jquery

Question

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

结果应为：

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>

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

Answer 2

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;