Duvida Adicionar e remover linha da tabela

[zzrickimzz]

O que eu quero se poderem me ajudar agradeço muito, é adicionar uma linha com os valores do campo texto clicando em um botao e remover a linha quando clica no botao daquela linha.
Lembrando que os campos de texto nao pode ter mesmo nome, pois esses dados sera enviado ao banco.

codificacao para ajudar a entender:

<form id="form1" name="form1" method="post" action="">

<table width="935" border="0" class="fundo">
  <tr>
    <td width="311">Capacitacao</td>
    <td width="106">Carga horaria</td>
    <td width="395">Local</td>
    <td width="115">Data</td>
    <td > </td>
    
  </tr>
  <tr>
    <td><label for="txtCapacitacao1"></label>
      <input type="text" name="txtCapacitacao" id="txtCapacitacao"></td>
    <td><label for="txtCarga1"></label>
      <input type="text" name="txtCarga" id="txtCarga"></td>
    <td><label for="txtLocal1"></label>
      <input type="text" name="txtLocal" id="txtLocal"></td>
    <td><label for="txtData1"></label>
      <input type="text" name="txtData" id="txtData"></td>
          <td ><input name="Botão" type="button" value="Adcionar" /> </td>
  </tr>
  
</table>
<br />
<table width="935" border="0" class="fundo" id="tblCapacitacao">
  <tr>
    <td width="255">Capacitacao</td>
    <td width="144">Carga horaria</td>
    <td width="304">Local</td>
    <td width="214">Data</td>
    
    
  </tr>
  <tr>
    <td><label for="txtCapacitacao1"></label>
      <input type="text" name="txtCapacitacao1" id="txtCapacitacao1"></td>
    <td><label for="txtCarga1"></label>
      <input type="text" name="txtCarga1" id="txtCarga1"></td>
    <td><label for="txtLocal1"></label>
      <input type="text" name="txtLocal1" id="txtLocal1"></td>
    <td><label for="txtData1"></label>
      <input name="txtData1" type="text" id="txtData1" size="8" maxlength="8">
      <input type="submit" name="button" id="button" value="Remover"></td>
        
  </tr>
  
</table>
</form>

[5Y5T3M]

Eu ia até escrever todo o código, porém devido a sua abordagem a usar tabelas, não tenho tempo, até mesmo porque não sei mexer com tabelas, e também porque como vai enviar para o DB, acredito que sera mais dificil terá que criar inputs hidden(s) , e/ou usar um ajax para poder inserir no banco de dados no momento do clique, o que seria um pouco arriscado, e eneficiente, de qualquer forma, vou te falar como fazer, pois já fiz algumas vezes em meus projetos.

Basicamente com JS, tu pode fazer, só que recomendo o uso do jQuery, já que torna mais fácil,
pois bem.

Tu deve adicionar um Listener no botão de tal forma com que quando clicado, ele faça uma varredura pela página procurando o último campo e de um nome único para o novo campo, ( isso pode consumir com recursos já que a arquitetura do DOM, tem alguns graves leeks ), ou tú pode deixar uma variável global, ou encapsula-la de alguma forma, que contenha o contado, dessa forma, tera um código mais eficaz, logo após isso deve, procurar o ultimo elemento no seu caso a tabela e dar um append a ela, do elemento criado.


Agora vou dar uma dica útil, que tirei do Livro - Alto Desempenho com JavaScript da O`Really ( ou algo do genero ), tu pode fazer uma copia do html do elemento, e depois concatenar o conteudo do com o elemento hard coded ( não sei se existe termo em português para isso ), dessa forma evita , leeks do navegador.

Bem espero ter ajudado.
Não é difícil, basta um pouco de estudo, caso tenha dúvidas ou queira abordagens diferentes fique a vontade para falar, caso não tenha entendido nada, ou eu não tenha ajudado em nada, desculpe pela perda de tempo lendo isso.