Estou tentando criar uma linha editável, para que, quando eu clicar nela, o Js me traga os inputs, me permitindo fazer as alterações naquela linha e realizar o Update no banco.
Como nesta imagem, que printei do Trello.
Observe que é uma linha, mas quando clico sobre ela, a aplicação me traz um campo para editar e salvar.
function editarPedido() {
var alterar = document.getElementById("editar");
alterar.innerHTML =
"<input type='text' name='alt-nome'>"+
"<input type='text' name='alt-causa'>"+
"<input type='submit' name='salvar' value='Salvar'>"+
"</form>";
}
<ul>
<?php if(!empty($campos)):
foreach($campos as $campo): ?>
<li class='lista-pedidos'>Nome: <?=$campo->nome?> - Causa: <?=$campo->causa?>
<a href="#" onclick="editarPedido()"> Editar</a>
<form action='action.php' method='post'>
<input type='hidden' name='id' value='<?=$campo->id?>'>
<div id="editar"></div>
</form>
</li>
<?php endforeach;
endif; ?>
</ul>
Isso até funciona, mas quando clico em editar, os inputs sempre aparecem na primeira linha. Não consigo fazer com que, ao clicar em qualquer linha, os inputs apareçam na linha que o click foi dado e permita a alteração dela.
Então tive a ideia de mandar de alguma maneira, o ID para essa função no Javascript, ou melhor, mandar para o getElementById
. Mas nada que tentei até agora funcionou, na missão de tentar resgatar o ID numa função em JS.
Neste caso, a minha metodologia está correta pra fazer esse tipo de coisa? Ou isso apresenta falhas na segurança? Existem formas melhores para fazer isso?