如何根据最后一个单元格/列的值过滤表的内容？-解网

问：

我一直在尝试根据分配给表最后一列的三个值之一来过滤表。该表是通过用户输入创建的，最后一列是包含“Node.JS”、“ReactJS”或“AngularJS”的选择选项。

例如，如果用户希望按“Node.JS”对表进行排序，我希望显示值为“Node.JS”的所有数据/行，并删除其余数据/行。我还将所有数据保存到 localStorage，所以像

const filtered = tableData.filter(everything containing Node.JS)); 
everythingElse.innerHtml.remove

将起作用，然后使用现在存储在 filtered 中的数据重建表。我似乎无法让它工作。任何帮助将不胜感激。

代码如下：

function filterTable() {
        const filterBy = document.getElementById('filter'); // filter option select
        const savedData = JSON.parse(localStorage.getItem('data'));
        const rows = table.rows;
        if(filterBy.value === 'Node.JS'){
            const filtered = savedData.filter(rows[4].value === 'Node.JS');
            console.log(filtered);
        }
    } // TBH idk if I'm even going in the right direction. Pls help haha

以防万一，这里是创建表的函数。

function createTable(rowData) {
        const deletebtn = document.createElement('button');
        deletebtn.innerText = 'Delete Entry';
        const newRow = table.insertRow(table.rows.length); // table.rows.length is the index where newRow gets inserted
        newRow.appendChild(deletebtn);

        const cell1 = newRow.insertCell(0);
        const cell2 = newRow.insertCell(1);
        const cell3 = newRow.insertCell(2);
        const cell4 = newRow.insertCell(3);
        const cell5 = newRow.insertCell(4);

        cell1.innerHTML = rowData ? rowData.name : name.value;
        cell2.innerHTML = rowData ? rowData.nachname : nachname.value;
        cell3.innerHTML = rowData ? rowData.bday : bday.value;
        cell4.innerHTML = rowData ? rowData.beruf : beruf.value;
        cell5.innerHTML = rowData ? rowData.veranstaltung : veranstaltung.value;

        deletebtn.addEventListener('click', deleteRow)
    }

JavaScript的

答：

0赞 Tiffany 5/19/2021 #1

我修改了您创建表格的方法，我更喜欢这个方法，因为它具有可读性和简单性，但如果您愿意，您可以将其应用于您的模式......

let createTable2 = (element, rowData) => {
        let mainTable = document.getElementById("main-table");
        let array = rowData;
        if(element.value !== "nofilter"){
              array = rowData.filter(item => item.veranstaltung.toLowerCase() === element.value)
        }
        
        let tableContent = "";
        for (let i = 0; i < array.length; i++) {
            tableContent += `
             
             <tr>
                <td>
                    ${array[i].name}
                </td>
                <td>
                    ${array[i].nachname}
                </td>
                <td>
                    ${array[i].bday}
                </td>
                <td>
                    ${array[i].beruf}
                </td>
                <td>
                    ${array[i].veranstaltung}
                </td>
                <td>
                    <button>Delete</button>
                </td>
            </tr>
            
            `
        }

        mainTable.innerHTML = tableContent;
    }
    let rowData = [
        {
            "name": "Tiffany",
            "nachname": "Campbell",
            "bday": "11/11/11",
            "beruf": "dono",
            "veranstaltung": "ReactJS"
        },
        {
            "name": "Jack",
            "nachname": "Traktor",
            "bday": "11/11/11",
            "beruf": "dono",
            "veranstaltung": "NodeJS"
        },
        {
            "name": "Someone",
            "nachname": "Else",
            "bday": "11/11/11",
            "beruf": "dono",
            "veranstaltung": "AngularJS"
        }
    ]
    createTable2(document.getElementById("filter"), rowData);

<select id="filter" onchange="createTable2(this, rowData)">
  <option value="nofilter">No Filter</option>
    <option value="angularjs">AngularJS</option>
    <option value="reactjs">ReactJS</option>
    <option value="nodejs">NodeJS</option>
</select>

<table border="1" id="main-table">
</table>

上一个：为什么 findIndex（）返回 0，而不是所需的索引？

下一个：如何在表上使用 .filter（）？

如何根据最后一个单元格/列的值过滤表的内容？

How do you filter the contents of a table based upon the value of the last cell/column?

评论