如何使用javascript按復選框過濾表格？

Question

我正在從XML文件創建一個表。 該表有三列（名稱，日期，密碼）和動態行。 我在秘密列的標題上創建了一個復選框（第三列）。 當我點擊復選框時，它應該只顯示具有相同“秘密”和相同“名稱”的那些人的最早日期的一行。 如果兩行有兩個相同的秘密，但有兩個不同的名稱，則應顯示兩行。 XSLT文件中的主要部分只是復選框。 我不確定xslt代碼是否真的需要onchange =“identicalSecrets（）”。

請參閱下面的代碼以獲取javascript。 它不起作用所以我很確定我在javascript代碼上有很多錯誤。

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

以上代碼的主要部分：

<th>Secret
    <input type="checkbox" id="identicalSecrets" onchange="identicalSecrets()"></input>
    <label for="identicalSecrets">hide identical secrets</label>
</th>

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

}

我希望當我單擊該復選框時，除了具有最早日期（第二列）的行之外，具有相等第一列和第三列的所有行都將消失。

Answer 1

你的javascript有很多問題......

您引用了一個名為table的變量，但尚未對其進行定義。
執行row[-1]無效，因為row不是數組（ rows is），而-1不是有效索引，因為數組是從0開始的。 你應該真的設置一個變量（稱為index ）來保持行索引的計數，然后你可以做rows[index - 1]來獲取前一行
您只想開始檢查第三行上的行（因為第一行是標題行，第二行沒有要檢查的先前數據行）
您正在將secret值與第一列和第三列進行比較。 但是你應該檢查第一列的名稱
Javascript函數區分大小寫，因此getElementsbyTagName將不起作用，因為小寫“by”
您應該使用“innerText”來獲取單元格的文本值，因為您要比較文本而不是單元格對象本身。

所以，把它們放在一起，你的javascript應該是這樣的：

function identicalSecrets() {
    let table, checkBox, filter, rows, cells, secret, name;
    table = document.getElementById('myTable');
    checkBox=document.getElementById('identicalSecrets');
    rows = table.getElementsByTagName("tr");
    filter = checkBox.checked;
    let index = 0;
    for (let row of rows) {
        if (index > 1) {
            cells = row.getElementsByTagName("td");
            name = cells[0].innerText;
            secret = cells[2].innerText;
            if (filter == true) {
                if (name === rows[index - 1].getElementsByTagName("td")[0].innerText && secret === rows[index - 1].getElementsByTagName("td")[2].innerText) {
                    row.style.display = "none"; // hide this row
                }
                else { // if secret or modelrange are not equal
                    row.style.display = "table-row"; // show this row
                }
            }
            else {
                row.style.display = "table-row"; // show this row
            }
        }
        index++;
    }
}

請參閱http://xsltfiddle.liberty-development.net/bnnZWi的實際操作

如何使用javascript按復選框過濾表格？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-04-12 12:39:57

如何使用javascript按復選框過濾表格？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-04-12 12:39:57

解決方案1
0 已采納 2019-04-12 12:39:57