Colocando um <input> do lado esquerdo do item escolhido

Frank K Hosaka · Junho 18, 2022

Estou trabalhando num pedido de compra que já tem vários itens, só falta definir a quantidade. Como a lista é enorme, e o celular é pequeno, pensei em criar um <input> do lado esquerdo do item escolhido. Eu gosto do PHP porque dá para fazer um monte de gambiarra. Veja o que eu fiz:

<?php
$verdura=["berinjela"=>0,"beterrada"=>2,"batata"=>0];
echo "<table><tr><th>Qtd<th>Verdura";
$i=0;
foreach ($verdura as $v=>$q) {
	$i++;
	$id="inp".$i;
	$qtd=$q;
	if ($qtd==0) {$qtd="<input type=hidden id=$id size=1>";} else {$qtd="$qtd<input type=hidden id=$id size=1>";}
	$ve="<a onclick=$id.type=text>$v</a>";
	echo "<tr><td>$qtd<td>$ve";}
echo "</table>";

lowys · Junho 19, 2022

Segue sugestão com separação de responsabilidades:
frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Editable TD</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      table,
      td,
      th {
        border: thin solid #aaa;
        padding: 6px 12px;
      }

      td:first-child {
        text-align: center;
      }

      tr:nth-child(odd) td {
        background-color: #ddd;
      }
      .p-12 {
        padding: 12px;
      }
      .text-end {
        text-align: right;
      }
      main {
        width: 165px;
        position: relative;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <main>
      <table>
        <thead>
          <tr>
            <th>Quant</th>
            <th>Verdura</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="p-12 text-end">
        <button>Enviar</button>
      </div>
      <article></article>
    </main>
    <script>
      const Table = document.querySelector('table')
      const Tbody = Table.querySelector('tbody')
      const verduras = [
        { name: 'berinjela', quant: 0 },
        { name: 'beterrada', quant: 2 },
        { name: 'batata', quant: 0 }
      ]

      for (const { name, quant } of verduras) {
        Tbody.innerHTML += `<tr><td name='quant' contenteditable='true'>${quant}</td><td contenteditable='true' name='name'>${name}</td></tr>`
      }

      document.querySelector('button').addEventListener('click', async (e) => {
        todos = Tbody.querySelectorAll('td[name]')

        const fData = new FormData()

        for (const td of todos) {
          console.log('td.name :>> ')
          fData.append(`item[${td.getAttribute('name')}][]`, td.innerHTML)
        }

        const response = await fetch('products.php', {
          method: 'POST',
          body: fData
        })

        const body = await response.text()

        document.querySelector('article').innerHTML = body
      })
    </script>
  </body>
</html>

Backend

<?php
echo '<pre>$_POST: ';
print_r($_POST);
echo '</pre>';

image.png.23ce8ca4beb15bb07b66bf5633970aa8.png

Desta forma, a própria td é editável.

Editado Junho 19, 2022 por lowys

lowys · Junho 20, 2022

Esse trecho html:5 foi gerado automaticamente pelo emmet, no vscode.
Pode-se fazer as edições/customizações necessárias.

Frank K Hosaka · Junho 20, 2022

Valeu pelo código, o seu código é 10! Mas eu não entendo nada de CSS e JavasCript. O problema é que eu tenho uma tabela de 300 produtos e um celular que só cabe 15 produtos. A sua solução é melhor porque você pede para o usuário preencher o pedido e depois enviar o pedido, e a minha solução força o servidor trabalhar bem mais, ele tem que atualizar a tela toda vez que o usuário entra com a quantidade de um item.

Por outro lado, o seu código traz uma informação valiosa além da responsabilidade da codificação, os <metas> que você colocou no cabeçalho funcionam. Assim, tomo a liberdade de perguntar: porque o lang é "eng" e não "Pt-br"?

Mais uma vez, estou grato pela sua aula.

Entrar

Colocando um <input> do lado esquerdo do item escolhido

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades