Question

我的表格看起来像Table

表行是从数据库中填充的。以下是代码。

<select name="tipo" id="tipoProveedor" data-col="6" class="form-control">
    <option value="todos">Todos</option>
    <?php 
        $tipo_values = array(
            'B'=>'Bienes',
            'S'=>'Servicios',
        );
        foreach($tipo_values as $value => $display_text)
        {
            $selected = ($value == $this->input->post('tipo')) ? ' selected="selected"' : "";
            echo '<option value="'.$value.'" '.$selected.'>'.$display_text.'</option>';
        } 
    ?>
</select>

<table id="table" class="table table-striped">
    <thead>
        <tr>
            <th>Razón Social</th>
            <th>Dirección</th>
            <th>Contacto</th>
            <th>Teléfono Fijo</th>
            <th>Teléfono Móvil</th>
            <th>Correo Electrónico</th>
            <th>Tipo</th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <?php foreach($listaproveedor as $p){ ?>
            <tr class="<?php echo $p['tipo']; ?>">
                <td><?php echo $p['razonSocial']; ?></td>
                <td><?php echo $p['direccion']; ?></td>
                <td><?php echo $p['nombre1']; ?></td>
                <td><?php echo $p['telefonoFijo1']; ?></td>
                <td><?php echo $p['telefonoMovil1']; ?></td>
                <td><?php echo $p['correoElectronico1']; ?></td>
                <td><?php echo $p['tipo']; ?></td>
                <td>
                    <a title="Editar" href="<?php echo site_url('proveedor/edit/'.$p['id']); ?>" class="btn btn-info btn-xs"><span class="fa fa-pencil"></span></a> 
                    <a title="Eliminar" href="<?php echo site_url('proveedor/remove/'.$p['id']); ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

在表格上方有一个选择下拉列表来过滤行。它有3个选项

Todos（全部）
比耶纳
SERVICIOS

过滤应该应用于Tipo列（图片中以红色圈出的那个）。

选项“Todos”应显示所有行
选项“Bienes”应显示“Tipo”栏中带字母B的所有行。
选项“Servicios”应在“Tipo”栏中显示字母S的所有行

编辑：我编辑了表的html代码并添加了以下脚本。现在它有效！

$('.familiaOcultar').addClass('collapse');
$('#tipoProveedor').change(function(){
    $('.familiaOcultar').collapse('hide');
    $('.familiaOcultar.B').hide();
    var val = $(this).val();
    if (val == "todos"){
        $('.B td').show();
        $('.S td').show();
        $('.familiaOcultar.B').hide();
    } else if (val == 'B'){
        $('.B td').show();
        $('.S td').hide();
        $('.familiaOcultar.B').show();
    } else {
        $('.B td').hide();
        $('.S td').show();
        $('.familiaOcultar.B').hide(); 
    }
});

使用选择下拉列表过滤php生成的表行

0 个答案: