时间戳

首页 > 解决方案 > 如何在 Internet Explorer 上使用带有复选框和下拉菜单的 xslt

javascript - 如何在 Internet Explorer 上使用带有复选框和下拉菜单的 xslt

问题描述

我正在使用 xslt 读取 xml 文件并在表格中显示其内容。我使用下拉菜单过滤一些模型范围和一个复选框来过滤相同的行。一切都在 Firefox 上运行良好，但在 Internet Explorer 上却不行。下拉菜单下拉，我可以检查我的复选框，但我无法过滤任何内容。也无法更改 Internet Explorer 中表格的任何条目。例如：我将最后结束时间的单元格更改为“-”，但 IE 不会更改此设置。我知道在 Internet Explorer 上工作的一些代码有一些“解决方案”，但任何解决方案都不适合我。

这是一些相关的xslt代码：

<?xml version="1.0" encoding="UTF-8"?>
<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>Secrets</title></head>

<body onload="script_for_all_functions();">

<table id="myTable">
        <colgroup>
            <col width="150" style="background-color:e2e2e2"></col>         
        </colgroup>
        <tr  style ="background-color:a5a5a5">
            <th rowspan="2">plane
                <select id="modelRangeDropdown" onchange="script_for_all_functions()">
                     <option selected="selected">All</option>
                     <xsl:for-each select="logstore/Fahrzeug">
                        <option>
                         <xsl:value-of select="Name" />
                        </option>
                     </xsl:for-each>                    
                </select>                   
            </th>   
            <th colspan="2" width="330">date</th>
            <th rowspan="2">Secret
                <input type="checkbox" id="identicalSecrets" onchange="script_for_all_functions()"></input>
                <label for="identicalSecrets">hide identical secrets</label>
            </th>
        </tr>

        <tr>
            <th align="center" style="background-color:a5a5a5">begin</th>
            <th align="center" style="background-color:a5a5a5">end</th>
        </tr>
        <xsl:for-each select="logstore/plane/trigger">
            <tr>
                <td align="center"><xsl:value-of select="../Name"/></td>
                <td align="center"><xsl:value-of select="date"/></td>
                <td align="center"><xsl:value-of select="date"/></td>
                <td><xsl:value-of select="secret"/></td>
            </tr>
        </xsl:for-each>
    </table>    
    <script type="text/javascript" src="/C:/eclipse-workspace/adclasses/src/inbox/script_for_all_functions.js"></script>    
</body>
</html>
</xsl:template>
</xsl:stylesheet>

还有一些（不是完整的）JavaScript 代码：

function script_for_all_functions() {
    // Variables
    let table, checkBox, filterCheckBox, filterDropDown, rows, cells, secret, modelRange, dropdown, rowCount;
    dropdown = document.getElementById('modelRangeDropdown');
    table = document.getElementById('myTable');
    rowCount = table.rows.length;
    checkBox=document.getElementById('identicalSecrets');
    rows = table.getElementsByTagName("tr");                
    filterCheckBox = checkBox.checked;
    filterDropDown = dropdown.value;
    let index = 0; 

    for (let row of rows) { // `for...of` loops through the NodeList
        // Verschiedene Spalteninhalte in Variabeln schreiben
        cells = row.getElementsByTagName("td"); 
        modelRange = cells[0] || null; 
        secret = cells[3]; 


        //=============================================================================================================
        //=============================================================================================================
        // Code for Drop-Down-Menu

        // if the Drop-Down-Menu is set to 'All', or this is the header row, or 1nd `td` text matches filter
        if (filterDropDown === "All" || !modelRange || (filterDropDown === modelRange.textContent)) {   
            if (filterCheckBox == false) {
                row.style.display = "table-row"; // show this row   
            }       
            else if (filterCheckBox == true) {
                if (index === 2) { 
                    row.style.display = "table-row"; // show this row
                }
                else if (index > 2) {
                    loop: { 
                        for (let i = 1; index - i > 1; i++) { 
                            if (modelRange.textContent === rows[index - i].getElementsByTagName("td")[0].textContent && secret.textContent === rows[index - i].getElementsByTagName("td")[3].textContent) { 
                                rows[index - i].getElementsByTagName("td")[2].firstChild.nodeValue = rows[index].getElementsByTagName("td")[2].textContent;
                                row.style.display = "none"; // hide this row
                            }                          
                            else { 
                                row.style.display = "table-row";
                                break loop;
                            }                      
                        }
                    }
                }
            }
        }
        else {
            row.style.display = "none"; // hide this row
        }
        //=============================================================================================================
        //=============================================================================================================


        //=============================================================================================================
        //=============================================================================================================
        // Code for Checkbox

        if (index > 2) { 
            if (filterCheckBox == true) { 
                loop: { 
                    for (let i = 1; index - i > 1; i++) { 
                        if (modelRange.textContent === rows[index - i].getElementsByTagName("td")[0].textContent && secret.textContent === rows[index - i].getElementsByTagName("td")[3].textContent) { 
                            rows[index - i].getElementsByTagName("td")[2].firstChild.nodeValue = rows[index].getElementsByTagName("td")[2].textContent;
                            row.style.display = "none"; // hide this row
                        }                                  
                        else { 
                            break loop;
                        }
                    }
                }
            }
            else { 
                if (filterDropDown === "All") { 
                    row.style.display ="table-row";
                }
                else if (modelRange.textContent === filterDropDown){
                    row.style.display = "table-row"; 
                }
            }
        }
        //=============================================================================================================
        //=============================================================================================================

        index++; 
      } 

}

标签： javascripthtmlxslt

解决方案

推荐阅读