Как отфильтровать таблицу по флажкам с помощью JavaScript? - PullRequest
Новая
       1

Как отфильтровать таблицу по флажкам с помощью JavaScript?

0 голосов
/ 12 апреля 2019

Я создаю таблицу из файла XML.Таблица имеет три столбца (имя, дата, секрет) и динамические строки.Я создал флажок в заголовке секретного столбца (третий столбец).Когда я нажимаю на флажок, он должен показывать только одну строку с самой старой датой тех, кто имеет тот же «секрет» и то же «имя».Если две строки имеют два одинаковых секрета, но два разных имени, то должны быть показаны обе строки.Основная часть в файле XSLT - это просто флажок.Я не уверен, действительно ли мне нужен onchange = "sameSecrets ()" для кода xslt.

См. Код ниже для 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
            }
        }
    }

}

Я ожидаю, что при установке флажка все строки с одинаковым первым столбцом и третьим столбцом исчезнут, кроме строки с самой старой датой (второй столбец).

1 Ответ

0 голосов
/ 12 апреля 2019

В вашем javascript есть несколько ошибок ...

  • Вы ссылались на переменную с именем table, но не определили ее.
  • Выполнение row[-1] недопустимо, поскольку row не является массивом (rows есть), а -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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...