Ir para conteúdo
Fórum Script Brasil
  • 0

Colocando um <input> do lado esquerdo do item escolhido


Frank K Hosaka

Pergunta

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>";

 

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 1

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 por lowys
Link para o comentário
Compartilhar em outros sites

  • 0

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.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...