单击下拉 select 标签时如何过滤表（可见选项）

Question

我在过滤表格时遇到问题。 表是由数据库中的数据组成的。 我有 5 列，其中值为 1 或 0（int） - 取决于用户在唱入形式中单击的内容。 此外，我有 select 标签，我有这 5 个选项。 我需要一个解决方案。 如果我单击其中一个选项，则在同名列为 0 的情况下，整行都会消失。

<select name="filter">
    <option value="none">No filter</option>
    <option value="value1" onclick="function1()">value1</option>
    <option value="value2" onclick="function2()">value2</option>
    <option value="value3" onclick="function3()">value3</option>
    <option value="value4" onclick="function4()">value4</option>
    <option value="value5" onclick="function5()">value5</option>
</select>

这是整个表的一部分，我有 1 或 0 个值。 并且表中的 output 工作正常。

<td <input type="hidden" name="value1" value="<?=$row['value1']?>"><?=$row['value1']?></td>
<td <input type="hidden" name="value2" value="<?=$row['value2']?>"><?=$row['value2']?></td>
<td <input type="hidden" name="value3" value="<?=$row['value3']?>"><?=$row['value3']?></td>
<td <input type="hidden" name="value4" value="<?=$row['value4']?>"><?=$row['value4']?></td>
<td <input type="hidden" name="value5" value="<?=$row['value5']?>"><?=$row['value5']?></td>



EDIT (source):

<td> <input type="hidden" name="value1" value="1">1</td>
<td> <input type="hidden" name="value2" value="0">0</td>
<td> <input type="hidden" name="value3" value="1">1</td>
<td> <input type="hidden" name="value4" value="1">1</td>
<td> <input type="hidden" name="value5" value="0">0</td>

编辑（图片）：

第一张没有任何过滤器的图片（第一个 select 选项“无过滤”）：
第一张图片链接

第二张图片（选择第二个值过滤 - > select 选项中的第三个值，因为第一个是“没有过滤”）：
第二张图片链接
我们可以看到它有效，但我需要删除完整的行而不是只删除单元格。

最后一个值过滤器的图片（同样的问题，但它有效）：
第三张图片链接

Answer 1

使用一些基本的 javascript 来实现所述目标相当简单。 您不需要 5 个单独的功能（由于某种原因您没有展示任何功能），但您确实需要改进您的 HTML 并确保标签正确关闭和嵌套。

 // Find all the hidden inputs within the table rows/cells const col=document.querySelectorAll('tr td input[type="hidden"]'); // assign an event listener to the select menu that processes "change" events document.querySelector('select').addEventListener('change',function(e){ // ensure that all table-rows are visible col.forEach(n=>n.parentNode.style.display='table-cell'); // if the user selects an option from the menu ( other than the 1st one ) // find the corresponding hidden input (based upon name & value) and hide it if( this.options.selectedIndex > 0 ){ let tr=document.querySelector(`input[name="${this.value}"][value="0"]`); if( tr.==null ) tr.parentNode.style;display='none'; } });

 table{border:1px solid grey;background:pink;margin:0.25rem 0} td{padding:1rem;border:1px dotted grey;background:white} select{padding:1rem;margin:0.25rem 0}

 <select name="filter"> <option value="none">No filter</option> <option value="value1">value1</option> <option value="value2">value2</option> <option value="value3">value3</option> <option value="value4">value4</option> <option value="value5">value5</option> </select> <table> <tr> <td><input type="hidden" name="value1" value="1">1 - #VALUE1#</td> <td><input type="hidden" name="value2" value="0">0 - #VALUE2#</td> <td><input type="hidden" name="value3" value="1">1 - #VALUE3#</td> <td><input type="hidden" name="value4" value="1">1 - #VALUE4#</td> <td><input type="hidden" name="value5" value="0">0 - #VALUE5#</td> </tr> </table>

Answer 2

最后，在Abronsius 教授的大力帮助下，我有了最终的解决方案。

而且效果很好！

    <script>
    // Find all the hidden inputs within the table rows/cells
    const col=document.querySelectorAll('td input[type="hidden"]');

    // assign an event listener to the select menu that processes "change" events
    document.querySelector('select').addEventListener('change',function(e){

        // ensure that all table-rows are visible
        col.forEach(n=>n.parentNode.style.display='table-cell');
        
        // if the user selects an option from the menu ( other than the 1st one )
        // find the corresponding hidden input (based upon name & value) and hide it
        if( this.options.selectedIndex > 0 ){
            // save all rows in one variable and catching row by row with loop
            let tr=document.querySelectorAll(`input[name="${this.value}"][value="0"]`);
            //dividing by 9 is because i have 9 cells 
            for (var i = 0; i < (col.length/9); i++){
                if( tr[i]!==null ) tr[i].parentNode.parentNode.style.display='none';
            }
        }
        // again, when is clicked "without filter" shows all rows
        if( this.options.selectedIndex == 0 ){
            col.forEach(n=>n.parentNode.parentNode.style.display='table-row');
        }
    });
    </script>