如何用JavaScript实现Laravel项目下拉框过滤表格kode_akun列

我学习Laravel已有4天，正在启动一个新的Laravel项目。需要通过下拉框过滤表格中的kode_akun列，以下是我的表格代码和下拉框代码：

表格代码 #

<table id="myTable" class="table table-rincian horizontal-scrollable">
    <thead>
        <tr>
            <th scope="col" style="width: 10%">Kode</th>
            <th scope="col">Uraian</th>
            <th scope="col">Volume</th>
            <th scope="col">Satuan</th>
            <th scope="col">Harga</th>
            <th scope="col">Jumlah</th>
            <th scope="col">Ket</th>
            <th scope="col" style="width:15% !important;">Aksi</th>
            <th scope="col">Catatan</th>
        </tr>
    </thead>
    <tbody class="table-group-divider">
        @php
            $array = json_decode( $listrabrincian, true );
            $arrays = $array['rab_rincian'];
            foreach($arrays as $item) {
                echo "
                <tr>
                    <td>
                        ".$item['kode_akun']."
                    </td>
                    <td>
                        ".$item['uraian']."
                    </td>
                    <td>
                        ".$item['volum']."
                    </td>
                    <td>
                        ".$item['satuan']."
                    </td>
                    <td>
                        ".$item['sbm']."
                    </td>
                    <td>
                        ".$item['subtotal']."
                    </td>
                    <td>
                        -
                    </td>
                    <td>                                                        
                        <button class='btn btn-sm btn-warning'>EDIt</button>
                        <button class='btn btn-sm btn-primary' type='button'  data-bs-toggle='modal' data-bs-target='#btn_i_copy'>
                            COPY
                        </button>
                        <button class='btn btn-sm btn-danger' type='button'  data-bs-toggle='modal' data-bs-target='#btn_i_delete'>
                            HAPUS
                        </button>                                                        
                    </td>
                    <td>
                        -
                    </td>
                </tr>";
            }
        @endphp
    </tbody>
</table>

下拉框代码 #

<select name="dd_akun" id="ddAkun" style="width: 70%;" >
    <option value="">All</option>
    @php
        $array = json_decode( $listakun, true );
        $arrays = $array['akun'];
        foreach($arrays as $item) {
            $kode = $item['kode'];
            $uraian = $item['uraian'];
            echo "<option value='$kode'> $uraian </option>";
        }
    @endphp
</select>

实现过滤的JavaScript代码 #

直接在页面底部添加这段JS代码即可实现实时过滤：

// 获取下拉框和表格tbody元素
const akunDropdown = document.getElementById('ddAkun');
const tableRows = document.querySelectorAll('#myTable tbody tr');

// 监听下拉框的选择变化事件
akunDropdown.addEventListener('change', function() {
    const selectedKode = this.value.trim();

    // 遍历每一行表格数据
    tableRows.forEach(row => {
        // 获取当前行的kode_akun值（第一列的内容）
        const rowKode = row.querySelector('td:first-child').textContent.trim();

        // 判断是否显示当前行：如果选的是All，或者行的kode和选中值匹配
        if (selectedKode === '' || rowKode === selectedKode) {
            row.style.display = ''; // 显示行
        } else {
            row.style.display = 'none'; // 隐藏行
        }
    });
});

代码说明 #

• 先获取下拉框和表格的所有行元素
• 给下拉框绑定change事件，每次选择变化时触发过滤逻辑
• 遍历每一行，提取第一列的kode_akun值
• 根据选中的下拉框值决定显示或隐藏对应行：选中All时显示所有行，否则只显示kode匹配的行

内容的提问来源于stack exchange，提问作者Muhammad Ihsan