I'm creating a table from a XML file. The table has three columns (name, date, secret) and dynamic rows. I have created a checkbox on the header of the secret column (third column). When I click on the checkbox it should only show the one row with the oldest date of those who has the same "secret" and the same "name". If two rows has two identical secrets, but two different names, then both rows should be shown. The main part in the XSLT file is just the checkbox. I am not sure if I really need a onchange="identicalSecrets()" for the xslt code.
See code below for javascript. It doesn't work so I'm pretty sure that I have many mistakes on javascript code.
XSLT or HTML:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
<head><title>Shared Secrets</title></head>
<body>
<h1>Shared Secrets</h1>
<table id="myTable">
<colgroup>
<col width="150" style="background-color:red"></col>
<col width="165"></col>
</colgroup>
<tr style ="background-color:grey">
<th>plane
<select id="modelRangeDropdown" onchange="filterReports()">
<option selected="selected">All</option>
<xsl:for-each select="logstore/plane">
<option>
<xsl:value-of select="Name" />
</option>
</xsl:for-each>
</select>
</th>
<th>Datum</th>
<th>Secret
<input type="checkbox" id="identicalSecrets" onchange="identicalSecrets()"></input>
<label for="identicalSecrets">hide identical secrets</label>
</th>
</tr>
<xsl:for-each select="logstore/plane/trigger">
<tr>
<td><xsl:value-of select="../Name"/></td>
<td><xsl:value-of select="date"/></td>
<td><xsl:value-of select="secret"/></td>
</tr>
</xsl:for-each>
</table>
<script type="text/javascript" src="/../../filterReports.js"></script>
<script type="text/javascript" src=/../../identicalSecrets.js"></script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Main part on the code above:
<th>Secret
<input type="checkbox" id="identicalSecrets" onchange="identicalSecrets()"></input>
<label for="identicalSecrets">hide identical secrets</label>
</th>
Javascript code:
function identicalSecrets() {
let checkBox, filter, rows, cells, secret;
checkBox=document.getElementById('identicalSecrets');
rows = table.getElementsByTagName("tr");
filter = checkBox.value;
for (let row of rows) {
cells = row.getElementsByTagName("td");
secret = cells[2];
if (filter == true) {
if (secret === row[-1].getElementsbyTagName("td")[2] && secret === row[-1].getElementsbyTagName("td")[0]) { // If the actual secret is equal to the secret in the last row and the modelranges are equal then hide these rows.
row.style.display = "none"; // hide this row
}
else { // if secret or modelrange are not equal
row.style.display = ""; // show this row
}
}
}
}
I expect that when I click the checkbox, all rows with equal first column and third column will disappear except the row with the oldest date (second column).
Aucun commentaire:
Enregistrer un commentaire