0

I have a table and i want that only appear the column that the user select in the combobox

<table class="form-list-table" width="100%">
                <tr class="form-list-table-header">
                    <td class="hidden" name="Nome">Municípios</td>
                    <td class="hidden" name="Nome">Postos de Identificação</td>
                    <td class="hidden" name="Nome">Colaboradores</td>
                    <td class="" name="Total">Inclusões</td>
            </tr>
</table>

<div class="form-item combobox esquerda">
                    <div class="form-item-label inline ui-widget-content"><span>Agrupar por</span></div>
                    <select class="combobox" name="AgruparPor">
                        <option value="Municipio">Municípios</option>
                        <option value="PostoIdentificacao">Postos de Identificação</option>
                        <option value="Usuario">Colaboradores</option>
                    </select>
                </div>
2
Contributors
1
Reply
15
Views
2 Years
Discussion Span
Last Post by pritaeas
0

With jQuery this might do it:

$('select').on('change', function() {
    // get selected value
    var value = $(this).val();

    // hide all
    $('td[name="Nome"]').addClass('hidden');

    // unhide column where text matches selected value
    $('td[name="Nome"]').filter(function(){ return $(this).text() === value; }).removeClass('hidden');
});
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.