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).

Categories: Tutorial