como validar campos en una tabla dinamica??

kilpo · #1 (**permalink**) 25/11/2008, 18:41

Hola a todos tengo un problema, tengo una tabla dinamica la cual agrego filas y la borro pero aparte de eso quiero validar los input para poder ingresarlo en una base de dato este es el codigo

Código javascript:

Ver original<!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=iso-8859-1" />
<title>Untitled Document</title>
  
<script language='javascript' src="popcalendar.js"></script> 
 
 
 
<script language=javaScript1.2>
var cont=2;
 
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 = "" + "<input name=cod"+cont+" type=text id=cod"+cont+" size=10>";
celda2.innerHTML = "" + "<textarea name=espe"+cont+" rows=2 id=espe"+cont+"></textarea>";
celda3.innerHTML = "" + "<input name=unidad"+cont+" type=text id=unidad"+cont+" size=7>";
celda4.innerHTML = "" + "<input name=cant"+cont+" type=text id=cant"+cont+" size=11>";
celda5.innerHTML = "<input name=fecha"+cont+" type=text onclick=\"popUpCalendar(this, form1.dateArrival"+cont+", 'mm-dd-yyyy')\" id=dateArrival"+cont+" size=10>" ;
celda6.innerHTML =  "<input name=ppro"+cont+" type=text id=ppro"+cont+">";
celda7.innerHTML = "" + "<input name=pcom"+cont+" type=text id=pcom"+cont+">";
celda8.innerHTML = "" +  "<input name=prov"+cont+" type=text id=prov"+cont+">";
celda9.innerHTML = "" +  "" ;
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);
cont++;
}
 
 
</script>
 
<style type="text/css">
/*
Theme: Dark Night
Author: Michael Schmieding
Web site: http://www.slifer.de/
*/
 
table a, table, tbody, tfoot, tr, th, td, table caption {
    font-family: Verdana, arial, helvetica, sans-serif;
    background:#262b38;
    color:#fff;
    text-align:left;
    font-size:9px;
}
table, table caption {
    border-left:3px solid #567;
    border-right:3px solid #000;
}
table {
    border-top:1px solid #567;
    border-bottom:3px solid #000;
}
table a {
    text-decoration:underline;
    font-weight:bold;
}
table a:visited {
    background:#262b38;
    color:#abc;
}
table a:hover {
    text-decoration:none;
    position:relative;
    top:1px;
    left:1px;
}
table caption {
    border-top:3px solid #567;
    border-bottom:1px solid #000;
    font-size:9px;
    font-weight:bold;
}
table, td, th {
    margin:0px;
    padding:0px;
}
tbody td, tbody th, tbody tr.odd th, tbody tr.odd td {
    border:1px solid;
    border-color:#567 #000 #000 #567;
}
td, th, table caption {
    padding:5px;
    vertical-align:middle;
}
tfoot td, tfoot th, thead th {
    border:1px solid;
    border-color:#000 #567 #567 #000;
    font-weight:bold;
    white-space:nowrap;
    font-size:14px;
}
.style3 {font-size: 9px}
body {
    background-image: url(images/fondo.png);
    background-repeat: repeat;
}
</style>
 
 
 
</head>
 
<body>
 
  <p>&nbsp;</p>
 
<button onclick="suma()">Agregar</button>
 
<form id="form1" name="form1" method="get" action="guardar.php">
    <table width="1149" border="1" align="center" id="unaTabla">
    <tbody id="cuerpoTabla">
     
      <tr id="a1">
        <td scope="col" width="195" id="c1"><span class="style3">Codigo</span></td>
        <td scope="col" width="110" id="c1"><span class="style3">Especificaciones</span></td>
        <td scope="col" width="114" id="c1"><span class="style3">Unidades</span></td>
        <td scope="col" width="144" id="c1"><span class="style3">Cantidad</span></td>
        <td scope="col" width="144" id="c1"><span class="style3">Fecha de Obra </span></td>
        <td scope="col" width="144" id="c1"><span class="style3">Precio propuesta </span></td>
        <td scope="col" width="144" id="c1"><span class="style3">Precio Compra</span></td>
        <td scope="col" width="48" id="c1"><span class="style3">Proveedor</span></td>
        <td scope="col" width="48" id="c1">&nbsp;</td>
      </tr>
     
      <tr align="center" id="a2">
        <td  scope="row" id="c2"><input name="cod1" type="text" id="cod1" size="10" /></td>
        <td  scope="row" id="c2"><textarea name="espe1" rows="2" id="espe1"></textarea></td>
        <td  scope="row" id="c2"><input name="unidad1" type="text" id="unidad1" size="7" /></td>
        <td  scope="row" id="c2"><input name="cant1" type="text" id="cant1" size="11" /></td>
        <td  scope="row" id="c2"><input name="fecha1" type="text" onclick="popUpCalendar(this, form1.dateArrival, 'mm-dd-yyyy')" id="dateArrival" size="10" /></td>
        <td  scope="row" id="c2"><input name="ppro1" type="text" id="ppro1" /></td>
        <td  scope="row" id="c2"><input name="pcom1" type="text" id="pcom1" /></td>
        <td  scope="row" id="c2"><input name="prov1" type="text" id="prov1" /></td>
        <td  scope="row" id="c2">&nbsp;</td>
      </tr>
    </tbody>
  </table>
 
  
 
  <p>
    <label>
    <input type="submit" name="Submit2" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>

he intentado formas de validar y solo logro validar la primera fila

Fernand0 · #2 (**permalink**) 25/11/2008, 20:16

Código javascript:

Ver originalvar row=0;
 
function suma() {
var miTabla = document.getElementById("cuerpoTabla");
 
var fila = document.createElement("tr");
fila.id='row'+row; ++row;
}

Asi podrias analizar las filas especificamente... o sino... podrias llegar al TR desde los inputs con el parentNode... depende de como este realizado tu codigo

Tambien podrias recorrer la tabla con el getElementsByTagName('TR') o algo asi..

vmac179 · #3 (**permalink**) 25/11/2008, 23:59

podrias usar DOM en vez de innerHTML yo la validacion la hice con jquery y queda algo así

Código PHP:

      ///////////////////////////////////////////

    celda = fila.insertCell(6);

    var latitud = document.createElement('input') // latitud
        latitud.type = 'text';
        for (i=0;i<nuevo_indice;i++) {
        latitud.name = 'latitud[]'+i;
        latitud.id = 'latitud[]'+i;
        }
        celda.appendChild(latitud);

    ///////////////////////////////////////////

como vez va cambiando el id y el name para después haga el trabajo jquery

Salu2