Javascript/JSP在Datatable中进行迭代并计数发生次数

Question

我有一个Datatable，它在两列上进行过滤：第一列是项目，第二列是平台。每个项目都可以在每个平台上执行。我需要遍历该Datatable的所有行，并获得一个项目在平台上执行的次数的统计信息。这是我的代码的一部分，我有表格：

<p id="date_filter">
<input type="text" id="datepicker_from" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="From:">
<input type="text" id="datepicker_to" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="To:">
</p>

<button onClick="calculateStatistics()">Click!</button>
<select class='filter' id="select">
<option value="">All softwares</option>
<option value="">software1</option>
<option value="">software2</option>
<option value="">software3</option>
<option value="">software4</option>
</select>
<select class='filter' id="selectWindows">
<option value="">All</option>
<option value="">winXp</option>
<option value="">win7</option>
<option value="">winVista</option>
<option value="">win10</option>
</select>
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>software name</th>
<th>windows version</th>
<th>CreatedDate</th>
</tr>
</thead>

<tbody>
<tr>
<td>Id</td>
<td>software 1</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 1</td>
<td>winXp</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 2</td>
<td>win7</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 3</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 3</td>
<td>winXp</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 2</td>
<td>winVista</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>win7</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 1</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>winXp</td>
<td>date</td>
</tr>
</tbody>
</table>
<script>
function calculateStatistics() {
var selectPlatformCheck = document.getElementById("selectWindows");
var selectPlatformSelected = selectPlatformCheck.options[selectPlatformCheck.selectedIndex].value;
//projects
var software1 = "";
var software2 = "";
var software3 = "";
var software4 = "";
//platforms
var win10 = 0;
var winXp = 0;
var win7 = 0;
var winVista = 0;

if(selectPlatformSelected !="") {
for(var i = 0, row; row = table.rows[i]; i++){
if(selectPlatformSelected != "") {
if(selectPlatformSelected == "win10"){
win10++;
}
else if(selectPlatformSelected == "winXp"){
winXp++; 
}
else if(selectPlatformSelected == "win7" ){
win7++; 
}
else{
winVista++; 
}
}
}
}

}

</script>

点击按钮"；单击"；我需要创建一个新的选项卡，打印项目在平台上运行的时间，例如：

software1 runs: 
2 times on win10
1 time on winXp
software2 runs:
1 time on win7
1 time on winVista
software3 runs:
1 time on win10
1 time on winXp
software4 runs:
2 times on win10
1 time on win7
1 time on winXp

我如何在javascript/JSP中做到这一点？这是一个JSFiddlehttps://jsfiddle.net/feanor93/becgq7fL/64/

还有，有没有办法以一种奇特的方式打印这些统计数据？非常感谢

EDIT：这是我的javascript函数，它不断返回0：

Answer 1

这是一个开始

function calculateStatistics() {
const selectPlatformSelected = document.getElementById("selectWindows").value;
//projects
var software1 = "";
var software2 = "";
var software3 = "";
var software4 = "";

const platforms = {
win10: 0,
winXp: 0,
win7: 0,
winVista: 0
};
[...document.querySelectorAll("#datatable tbody tr")].forEach(row => {
const platform = row.cells[2].textContent;
platforms[platform]++;
})
document.getElementById("stats").innerHTML = selectPlatformSelected ? 
selectPlatformSelected+": "+platforms[selectPlatformSelected] : 
Object.keys(platforms).map(platform => platform+": "+platforms[platform]).join("<br/>");

}

<p id="date_filter">
<input type="text" id="datepicker_from" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="From:">
<input type="text" id="datepicker_to" class="form-control date-range-filter" data-date-format="yyyy-mm-dd" placeholder="To:">
</p>
<button onClick="calculateStatistics()">Click!</button>
<div id="stats"></div>
<select class='filter' id="select">
<option value="">All softwares</option>
<option value="">software1</option>
<option value="">software2</option>
<option value="">software3</option>
<option value="">software4</option>
</select>
<select class='filter' id="selectWindows">
<option value="">All</option>
<option value="win10">win10</option>
<option value="win7">win7</option>
<option value="winXp">winXp</option>
<option value="winVista">winVista</option>
</select>
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>software name</th>
<th>windows version</th>
<th>CreatedDate</th>
</tr>
</thead>

<tbody>
<tr>
<td>Id</td>
<td>software 1</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 1</td>
<td>winXp</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 2</td>
<td>win7</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 3</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 3</td>
<td>winXp</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 2</td>
<td>winVista</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>win7</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 1</td>
<td>win10</td>
<td>date</td>
</tr>
<tr>
<td>Id</td>
<td>software 4</td>
<td>winXp</td>
<td>date</td>
</tr>
</tbody>
</table>