Grid com inserção automática de campos
Pessoal,
Estou bolando um grid para inserção de dados, vejam o codigo abaixo.
Só tem um problema:
Na primeira linha, ao clicar na tecla TAB no último campo INPUT, ele cria automaticamente uma nova linha para inserção.
Só que, esta nova linha é criada pela função addRow(NumRow), e é inserido um comando para adicionar no último input da linha, o atruibuto onBlur="addRow(4);" para continuar após a tecla TAB continuar criando novas linhas de campos.
Porem nao funciona! Como fazer???
<html><head><title></title><script language="javascript">counter = 1;function removeRow(){ if (counter > 1){ var node = document.getElementById("Grid").getElementsByTagName("tbody")[0]; var throwaway_node = document.getElementById("tr" + counter); node.removeChild(throwaway_node); counter --; }}function addRow(NumRow){ var tbody = document.getElementById("Grid").getElementsByTagName("tbody")[0]; var row = document.createElement("tr"); var column; var inputNew; row.setAttribute("id","tr" + (counter + 1)); for(var i = 0; i < NumRow; i++) { column = document.createElement("td"); inputNew = document.createElement("input"); inputNew.setAttribute("type","text"); inputNew.setAttribute("name","campo" + (i + 1)); inputNew.setAttribute("size","30"); inputNew.setAttribute("id","campo" + (i + 1)); if(i == (NumRow - 1)) { inputNew.setAttribute("onBlur","addRow(4);"); } column.appendChild(inputNew); row.appendChild(column); } tbody.appendChild(row); counter++;}</script><body><table id="Grid"> <tr> <td>Campo 1</td> <td>Campo 2</td> </tr> <tr> <td><input type="text" name="teste1" size=30></td> <td><input type="text" name="teste2" size=30></td> <td><input type="text" name="teste1" size=30></td> <td><input type="text" name="teste2" size=30 onBlur="addRow(4);"></td> </tr> <tbody></tbody></table><input name="button2" type="button" onClick="removeRow();" value="Remover"></body></html>Discussão (3)
Carregando comentários...