Tag: jquery

Em casos onde temos mais de uma coluna com o recurso de seleção global dentro de uma tabela html, podemos usar o exemplo abaixo para controlar qual elemento foi selecionado.

<th data-sortable="false" width="150px" class="text-danger">
    <input class="form-check-input" type="checkbox" id="chkSelectAllRem" />
    <label for="chkSelectAllRem">Todas/Nenhuma</label>
</th>
<th data-sortable="false" width="150px" class="text-success">
    <input class="form-check-input" type="checkbox" id="chkSelectAllEnc" />
    <label for="chkSelectAllEnc">Todas/Nenhuma</label>
</th>

...

<td>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="op_rem[]" value="<?= $row->id_pr_ordens ?>"
               id="op_rem.<?= $row->id_pr_ordens ?>">
        <label class="form-check-label text-danger" for="op_rem.<?= $row->id_pr_ordens ?>">Remover</label>
    </div>
</td>
<td>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="op_enc[]" value="<?= $row->id_pr_ordens ?>"
               id="op_enc.<?= $row->id_pr_ordens ?>" />
        <label class="form-check-label text-success" for="op_enc.<?= $row->id_pr_ordens ?>">Encerrar</label>
    </div>
</td>

...

<script>
$("th input[type='checkbox']").on("change", function() {
    // remove seleção de todos checkboxes
    $('input[type="checkbox"]').not(this).prop("checked", false);
    // seleciona todos os elemento da coluna selecionada
    var cb = $(this), // checkbox that was changed
        th = cb.parent(), // get parent th
        col = th.index() + 1; // get column index. note nth-child starts at 1, not zero
    $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked); // select the inputs and [un]check it
});

$(document).ready(function() {
    // uncheck other boxes on the same row
    $(".form-check-input").click(function() {
        $('input[type="checkbox"]').change(function() {
            $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false);
        });
    });
});
</script>

De acordo com o conteúdo de cada linha de uma tabela html podemos modificar as propriedades dos elementos usando jQuery.

No exemplo abaixo temos uma tabela onde atribuímos os valores a serem observados nos campos data dentro da tag <tr>.

<form action="<?= $acao_aplicar ?>" method="post" id="form1">
    <input type="hidden" name="id_requisicao" value="<?= $requisicao->id ?> ">
    <table class="table table-sm small table-striped" id="itensTable">
        <thead>
            <tr>
                <th>Item</th>
                <th>Produto</th>
                <th>Descrição</th>
                <th>Unidade</th>
                <th class="text-end">Qt. Calculada</th>
                <th class="text-end">Saldo</th>
                <th width="140px" class="text-end">Qt. Solicitada</th>
            </tr>
        </thead>

        <tbody>
            <?php foreach ($itens as $row): ?>
                <tr class="align-middle" data-produto-ativo="<?= $row->produto_ativo ?>"
                    data-quantidade="<?= $row->qt_solicitada ?>">
                    <!-- item -->
                    <td>
                        <?= $row->item ?>
                    </td>
                    <!-- produto -->
                    <td>
                        <?= $row->produto_codigo ?>
                    </td>
                    <!-- descricao -->
                    <td>
                        <?= $row->produto_descricao ?>
                    </td>
                    <!-- unidade -->
                    <td>
                        <?= $row->produto_unidade ?>
                    </td>
                    <!-- quantidade calculada -->
                    <td class="text-end">
                        <?= number_format($row->qt_calculada, 3, ',', '.') ?>
                    </td>
                    <!-- saldo -->
                    <td class="text-end">
                        <?= number_format($row->saldo, 3, ',', '.') ?>
                    </td>
                    <!-- quantidade solicitada -->
                    <td>
                        <input type="hidden" name="id[]" value="<?= $row->id ?>">
                        <input type="number" style="text-align:right" class="form-control form-control-sm"
                               name="qt_solicitada[]" value="<?= $row->qt_solicitada ?>" required>
                    </td>
                </tr>
            <?php endforeach ?>
        </tbody>

    </table>
</form>

Em seguida, o código jQuery faz as alterações nos elementos.

<script>
    $(document).ready(function () {
        $('#itensTable tbody tr').each(function () {
            var produto_ativo = $(this).data('produto-ativo');
            var quantidade = $(this).data('quantidade');
            if (produto_ativo === 'f') {
                $(this).find('td').addClass('text-danger');
                $(this).find('input').prop('disabled', true);
                $(this).find('input').prop('required', false);
            }
            if (quantidade == 0) {
                $(this).find('td').addClass('text-secondary');
                $(this).find('input').prop('disabled', true);
                $(this).find('input').prop('required', false);
            }
        });
    });
</script>

Dica: nunca utilize underscore nos nomes dos campos data (ex: data-produto_inativo).