I'm creating a table from a XML file. The table has three columns and dynamic rows. I have created a checkbox on the header of the third column to hide all rows which have the same value in the third column. The main part in the XSLT file is just the checkbox. I am not sure if I really need a onchange="identicalSecrets()" in the
XSLT:
<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>
JavaScript:
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