Tema: Añadir/Eliminar filas de tablas html con javascript, gran problema
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 03/02/2014, 04:08
darkcl0wn
 
Fecha de Ingreso: febrero-2014
Mensajes: 32
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Añadir/Eliminar filas de tablas html con javascript, gran problema
Gracias de nuevo djaevi por tus codigos, combinando el primero que me diste mas este otro ultimo di con el codigo final que en verdad era lo que queria y seria el seguiente :)

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Agregar y quitar celdas</title>
    <script>
Código Javascript: 
Ver original
  1. function myCreateFunction() {
  2.  
  3.             var table = document.getElementById("myTable");
  4.             var row = table.insertRow(0);
  5.             var fila = table.insertRow();
  6.             var cell1 = row.insertCell(0);
  7.             var cell2 = row.insertCell(1);
  8.             // CREO UN ELEMENTO DEL TIPO INPUT CON document.createElement("NOMBRE TAG HTML QUE QUIERO CREAR");
  9.  
  10.  
  11.  
  12.             var input = document.createElement("input");
  13.             input.type = "text";
  14.             input.className = "urlresp";
  15.             input.value = "Url respuesta";
  16.             input.setAttribute("onclick", "vaciar_campo(this);");
  17.             input.style.height = "20px";
  18.             input.style.width = "100px";
  19.  
  20.             // Creo un segundo elemento Input
  21.  
  22.  
  23.             var input2 = document.createElement("input");
  24.             input2.type = "text";
  25.             input2.className = "ptss";
  26.             input2.value = "0";
  27.             input2.setAttribute("onclick", "vaciar_campo(this);");
  28.             input2.style.height = "20px";
  29.             input2.style.width = "30px";
  30.  
  31.  
  32.             var campo4 = document.createElement("input");
  33.             campo4.type = "button";
  34.             campo4.value = "-";
  35.             campo4.onclick = function ()
  36.  
  37.             {
  38.  
  39.                 var fila = this.parentNode.parentNode;
  40.                 var tbody = table.getElementsByTagName("tbody")[0];
  41.  
  42.                 tbody.removeChild(fila);
  43.  
  44.             }
  45.  
  46.  
  47.             // CON EL METODO appendChild(); LOS AGREGO A LA CELDA QUE QUIERO
  48.             cell1.appendChild(input);
  49.             cell2.appendChild(input2);
  50.             cell2.appendChild(campo4);
  51.         }
  52.  
  53.  
  54.  
  55.         function vaciar_campo(input) {
  56.  
  57.             input.value = "";
  58.  
  59.         }

Código HTML: 
Ver original
  1. </script>
  2. </head>
  3.  
  4. <body>
  5.     <button onclick="myCreateFunction()" type="button">
  6.         <img src="Boton1.png">
  7.     </button>
  8.     <br>
  9.     <table id="myTable" border="0">
  10.         <tr>
  11.             <input name="urlresp" type="text" id="urlresp" style="height: 20px; width: 100px;" onFocus="vaciar_campo(this)" value="Url respuesta">
  12.             <input name="ptss" type="text" class="ptss" id="ptss" style="height: 20px; width: 30px;" onFocus="vaciar_campo(this)" value="0">
  13.         </tr>
  14.     </table>
  15.  
  16.  
  17. </body>
  18.  
  19. </html>


Gracias de nuevo .
Saludos