Foros del Web » Programando para Internet » Javascript »

Problema al borrar un fila de una tabla

 Estas en el tema de Problema al borrar un fila de una tabla en el foro de Javascript en Foros del Web. Buenas a todo, soy nuevo en este foro como miembro pero siempre estoy revisando los post y buscando informacion en uno de estos pos dieron ...
  #1 (permalink)  
Antiguo 21/11/2008, 10:44
Avatar de kilpo  
Fecha de Ingreso: noviembre-2008
Mensajes: 19
Antigüedad: 16 años
Puntos: 0
Exclamación Problema al borrar un fila de una tabla
Buenas a todo, soy nuevo en este foro como miembro pero siempre estoy revisando los post y buscando informacion en uno de estos pos dieron un codigo para agregar filas y borrarlas pero este codigo no me funciona.al parecer se marrea con el getElementsByTagName("input") al tener varios input en una fila pero como puedo hacer para que seleccione el checkbox solamente.

Código: 
<head>
<script language=javaScript1.2>
function restar() {
var miTabla = document.getElementById("cuerpoTabla");
var i = 0;
do
if (miTabla.rows[i].getElementsByTagName("input")[0].checked == true)
miTabla.deleteRow(i);
else
i ++;
while (miTabla.rows.length != i)
}

function suma() {
var miTabla = document.getElementById("cuerpoTabla");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");
var celda5 = document.createElement("td");
var celda6 = document.createElement("td");
var celda7 = document.createElement("td");
var celda8 = document.createElement("td");
var celda9 = document.createElement("td");
celda1.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=cod1 type=text id=cod1 size=10>";
celda2.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<textarea name=espe1 rows=5 id=espe1></textarea>";
celda3.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=unidad1 type=text id=unidad1 size=7>";
celda4.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=cant1 type=text id=cant1 size=11>";
celda5.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=fech1 type=text id=fech1>";
celda6.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=ppro1 type=text id=ppro1>";
celda7.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=pcom1 type=text id=pcom1>";
celda8.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input name=prov1 type=text id=prov1>";
celda9.innerHTML = "" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input type=checkbox>";
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);
fila.appendChild(celda7);
fila.appendChild(celda8);
fila.appendChild(celda9);
miTabla.appendChild(fila);
}


</script>
</head>
<body style="color:blue" >
<script>
document.write(document.body.style[0]);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
body,td,th {
	color: #FFFFFF;
	font-size: 12px;
}
-->
</style></head>

<body>

<form id="form1" name="form1" method="post" action="">
  <p>&nbsp;</p>
  <p>obra fecha </p>
  <p>
    <input type="text" name="textfield" />
    <label>
    <input type="text" name="textfield2" />
    </label>
  </p>
  <p><fieldset>
  <legend></legend>
  <form id="form1" name="form1" method="get" action="">
  <p>&nbsp;</p>
  <p>
    <legend>Ingresos</legend>
  </p>
  <table width="1024" border="1" id="unaTabla">
    <tbody id="cuerpoTabla">
      <tr id="a1">
        <td width="69" id="b1">Codigo</td>
        <td width="195" id="c1">Especificaciones</td>
        <td width="110" id="c1">Unidades</td>
        <td width="114" id="c1">Cantidad</td>
        <td width="144" id="c1">Fecha de Obra </td>
        <td width="144" id="c1">Precio propuesta </td>
        <td width="144" id="c1">Precio Compra</td>
        <td width="144" id="c1">Proveedor</td>
        <td width="48" id="c1">Eliminar</td>
      </tr>
      <tr align="center" id="a2">
        <td id="b2"><label>
          <input name="cod1" type="text" id="cod1" size="10" />
        </label></td>
        <td id="c2"><textarea name="espe1" rows="5" id="espe1"></textarea></td>
        <td id="c2"><input name="unidad1" type="text" id="unidad1" size="7" /></td>
        <td id="c2"><input name="cant1" type="text" id="cant1" size="11" /></td>
        <td id="c2"><input name="fech1" type="text" id="fech1" /></td>
        <td id="c2"><input name="ppro1" type="text" id="ppro1" /></td>
        <td id="c2"><input name="pcom1" type="text" id="pcom1" /></td>
        <td id="c2"><input name="prov1" type="text" id="prov1" /></td>
        <td id="c2">&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <button onclick="restar()">subir</button>
  <button onclick="suma()">sumar</button>
  <p>l</p>
  <p>&nbsp;</p>
  <p>
    <label>
    <input type="submit" name="Submit2" value="Submit" />
    </label>
  </p>
 
</form>
<p>&nbsp;</p>
</body>
</html> 
    <label>
    <div align="right">
      <input type="submit" name="Submit" value="Enviar" />
    </div>
    </label></p>
  <div align="right"></div>
  </fieldset>*
  </p>

</form>
<p>&nbsp;</p>
</body>
</html>

de antemano muchas gracias.
  #2 (permalink)  
Antiguo 21/11/2008, 11:52
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: Problema al borrar un fila de una tabla
Hay varios errores que debes corregir en tu código, el primero es que la primera fila no tiene elementos "input", así que tu bucle debería empezar con 1 en lugar de 0.

Además, como tienes varios "input" debes recorrerlos con un bucle for hasta que encuentres el que sea type="checkbox", y si está seleccionado, borrar la fila.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 21/11/2008, 13:14
Avatar de kilpo  
Fecha de Ingreso: noviembre-2008
Mensajes: 19
Antigüedad: 16 años
Puntos: 0
Respuesta: Problema al borrar un fila de una tabla
david,mucha gracias por la pronta respuesta la verdad que soy nuevo en esto de java pero los for son = en cualquier lenguaje voy a probar y te cuento. y de nuevo gracias por la respuesta.
  #4 (permalink)  
Antiguo 21/11/2008, 13:38
 
Fecha de Ingreso: julio-2007
Ubicación: /home/victor
Mensajes: 114
Antigüedad: 17 años, 3 meses
Puntos: 0
Respuesta: Problema al borrar un fila de una tabla
no uses InnerHTML, usa DOM, creo que esto te sirve

Código javascript: 
Ver original
  1. <style>
  2.  
  3. .tabla
  4. {
  5.  background-color: orange;
  6. }
  7.  
  8. .titulos
  9. {
  10.  text-align: center;
  11.  font-weight: bolder;
  12.  background-color: yellow;
  13. }
  14.  
  15. .fila
  16. {
  17.  background-color: white;
  18. }
  19.  
  20. </style>
  21.  
  22. <script language="javascript">
  23.  
  24. function agregar_fila(origen, destino)
  25. {
  26.     ///////////////////////////////////////////
  27.  
  28.     var nombres   = origen.nombres.value;
  29.     var apellidos = origen.apellidos.value;
  30.  
  31.     var nuevo_indice = destino.rows.length;
  32.  
  33.     var fila;
  34.     var celda;
  35.     var valor;
  36.     
  37.     fila = destino.insertRow(nuevo_indice);
  38.     fila.style.background = "white";
  39.     
  40.     ///////////////////////////////////////////
  41.  
  42.     celda = fila.insertCell(0);
  43.     valor = document.createElement("input");
  44.         valor.type = "checkbox";
  45.         valor.id = "marca";
  46.         valor.name = "marca";
  47.         valor.value = nuevo_indice;
  48.     celda.appendChild(valor);
  49.  
  50.     ///////////////////////////////////////////
  51.  
  52.     celda = fila.insertCell(1);
  53.     valor = document.createTextNode(nombres + " - " + nuevo_indice);
  54.     celda.appendChild(valor);
  55.     
  56.     ///////////////////////////////////////////
  57.  
  58.     celda = fila.insertCell(2);
  59.     valor = document.createTextNode(apellidos);
  60.     celda.appendChild(valor);
  61.  
  62.     ///////////////////////////////////////////
  63. }
  64.  
  65. function remover_filas_marcadas(origen)
  66. {
  67.     ///////////////////////////////////////////
  68.  
  69.     var inputs = origen.getElementsByTagName("input");
  70.     var checkboxes = new Array();
  71.     var chk_cuenta = 0;
  72.     
  73.     ///////////////////////////////////////////
  74.  
  75.     for (i=0; i<inputs.length; i++)
  76.     {
  77.         if (inputs[i].type == "checkbox" &&
  78.             inputs[i].id == "marca" &&
  79.             inputs[i].checked)
  80.         {
  81.             checkboxes[chk_cuenta] = inputs[i];
  82.             chk_cuenta ++;
  83.         }
  84.     }
  85.  
  86.     ///////////////////////////////////////////
  87.  
  88.     for (i=0; i<checkboxes.length; i++)
  89.     {
  90.         origen.deleteRow(checkboxes[i].value - 1*i);
  91.     }   
  92.  
  93.     ///////////////////////////////////////////
  94.     
  95.     corregir_indices_tabla(origen);
  96.  
  97.     ///////////////////////////////////////////
  98. }
  99.  
  100. function corregir_indices_tabla(origen)
  101. {
  102.     ///////////////////////////////////////////
  103.  
  104.     var inputs = origen.getElementsByTagName("input");
  105.     
  106.     ///////////////////////////////////////////
  107.  
  108.     for (i=0; i<inputs.length; i++)
  109.     {
  110.         if (inputs[i].type == "checkbox" &&
  111.             inputs[i].id == "marca")
  112.         {
  113.             inputs[i].value = i + 1;
  114.         }
  115.     }
  116.  
  117.     ///////////////////////////////////////////
  118. }
  119.  
  120. </script>
  121.  
  122. <table class="tabla" id="info" name="info">
  123. <tr class="titulos">
  124.     <td>
  125.         Marca
  126.     </td>
  127.     <td>
  128.         Nombres
  129.     </td>
  130.  
  131.     <td>
  132.         Apellidos
  133.     </td>
  134. </tr>
  135. </table>
  136.  
  137. <br />
  138.  
  139. <form id="datos" name="datos">
  140.   Nombres:   <input type="text" id="nombres" name="nombres" value="" size="25" />
  141.   Apellidos: <input type="text" id="apellidos" name="apellidos" value="" size="25" />
  142.  
  143.   &nbsp;
  144.   <input type="button" id="agregar" name="agregar" value="Agregar" onClick="agregar_fila(datos, info)" />
  145.   <input type="button" id="remover" name="remover" value="Remover" onClick="remover_filas_marcadas(info)" />
  146. </form>
  #5 (permalink)  
Antiguo 21/11/2008, 14:35
Avatar de kilpo  
Fecha de Ingreso: noviembre-2008
Mensajes: 19
Antigüedad: 16 años
Puntos: 0
Respuesta: Problema al borrar un fila de una tabla
Cita:
Iniciado por vmac179 Ver Mensaje
no uses InnerHTML, usa DOM, creo que esto te sirve

Código javascript: 
Ver original
  1. <style>
  2.  
  3. .tabla
  4. {
  5.  background-color: orange;
  6. }
  7.  
  8. .titulos
  9. {
  10.  text-align: center;
  11.  font-weight: bolder;
  12.  background-color: yellow;
  13. }
  14.  
  15. .fila
  16. {
  17.  background-color: white;
  18. }
  19.  
  20. </style>
  21.  
  22. <script language="javascript">
  23.  
  24. function agregar_fila(origen, destino)
  25. {
  26.     ///////////////////////////////////////////
  27.  
  28.     var nombres   = origen.nombres.value;
  29.     var apellidos = origen.apellidos.value;
  30.  
  31.     var nuevo_indice = destino.rows.length;
  32.  
  33.     var fila;
  34.     var celda;
  35.     var valor;
  36.     
  37.     fila = destino.insertRow(nuevo_indice);
  38.     fila.style.background = "white";
  39.     
  40.     ///////////////////////////////////////////
  41.  
  42.     celda = fila.insertCell(0);
  43.     valor = document.createElement("input");
  44.         valor.type = "checkbox";
  45.         valor.id = "marca";
  46.         valor.name = "marca";
  47.         valor.value = nuevo_indice;
  48.     celda.appendChild(valor);
  49.  
  50.     ///////////////////////////////////////////
  51.  
  52.     celda = fila.insertCell(1);
  53.     valor = document.createTextNode(nombres + " - " + nuevo_indice);
  54.     celda.appendChild(valor);
  55.     
  56.     ///////////////////////////////////////////
  57.  
  58.     celda = fila.insertCell(2);
  59.     valor = document.createTextNode(apellidos);
  60.     celda.appendChild(valor);
  61.  
  62.     ///////////////////////////////////////////
  63. }
  64.  
  65. function remover_filas_marcadas(origen)
  66. {
  67.     ///////////////////////////////////////////
  68.  
  69.     var inputs = origen.getElementsByTagName("input");
  70.     var checkboxes = new Array();
  71.     var chk_cuenta = 0;
  72.     
  73.     ///////////////////////////////////////////
  74.  
  75.     for (i=0; i<inputs.length; i++)
  76.     {
  77.         if (inputs[i].type == "checkbox" &&
  78.             inputs[i].id == "marca" &&
  79.             inputs[i].checked)
  80.         {
  81.             checkboxes[chk_cuenta] = inputs[i];
  82.             chk_cuenta ++;
  83.         }
  84.     }
  85.  
  86.     ///////////////////////////////////////////
  87.  
  88.     for (i=0; i<checkboxes.length; i++)
  89.     {
  90.         origen.deleteRow(checkboxes[i].value - 1*i);
  91.     }   
  92.  
  93.     ///////////////////////////////////////////
  94.     
  95.     corregir_indices_tabla(origen);
  96.  
  97.     ///////////////////////////////////////////
  98. }
  99.  
  100. function corregir_indices_tabla(origen)
  101. {
  102.     ///////////////////////////////////////////
  103.  
  104.     var inputs = origen.getElementsByTagName("input");
  105.     
  106.     ///////////////////////////////////////////
  107.  
  108.     for (i=0; i<inputs.length; i++)
  109.     {
  110.         if (inputs[i].type == "checkbox" &&
  111.             inputs[i].id == "marca")
  112.         {
  113.             inputs[i].value = i + 1;
  114.         }
  115.     }
  116.  
  117.     ///////////////////////////////////////////
  118. }
  119.  
  120. </script>
  121.  
  122. <table class="tabla" id="info" name="info">
  123. <tr class="titulos">
  124.     <td>
  125.         Marca
  126.     </td>
  127.     <td>
  128.         Nombres
  129.     </td>
  130.  
  131.     <td>
  132.         Apellidos
  133.     </td>
  134. </tr>
  135. </table>
  136.  
  137. <br />
  138.  
  139. <form id="datos" name="datos">
  140.   Nombres:   <input type="text" id="nombres" name="nombres" value="" size="25" />
  141.   Apellidos: <input type="text" id="apellidos" name="apellidos" value="" size="25" />
  142.  
  143.   &nbsp;
  144.   <input type="button" id="agregar" name="agregar" value="Agregar" onClick="agregar_fila(datos, info)" />
  145.   <input type="button" id="remover" name="remover" value="Remover" onClick="remover_filas_marcadas(info)" />
  146. </form>
gracias vmac179 pero no logro enterder como crea las tabla la funcion agregar_fila o como podria agegar mas celdas a esta funcion.
  #6 (permalink)  
Antiguo 21/11/2008, 15:20
 
Fecha de Ingreso: julio-2007
Ubicación: /home/victor
Mensajes: 114
Antigüedad: 17 años, 3 meses
Puntos: 0
Respuesta: Problema al borrar un fila de una tabla
en tu javascript

Código PHP:
   celda = fila.insertCell(2);
   valor = document.createTextNode(apellidos);
    celda.appendChild(valor); 
Código PHP:
Apellidos: <input type="text" id="apellidos" name="apellidos" value="" size="25" /> 
es cosa que cambies parametros

Salu2
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:44.