PHP - guardar filas dinamicas de tabla jquery PHP

   
Vista:

guardar filas dinamicas de tabla jquery PHP

Publicado por Alexi (29 intervenciones) el 08/01/2014 23:31:02
Hola primeramente gracias por leer mi pregunta.. mi problema es el siguiente:
tengo una tabla que hace agrega filas dinamicas
que agrego por medio de un boton, algo como una factura donde
tengo una cabecera y su respectivo detalle se agrega dinamicamente dependiendo lo que necesite el usuario ingresar
luego tengo un boton guardar aqui quiero recorrer todas las filas de la tabla y enviarla a guardar a la base.
Actualmente tengo este script para agregar filas a la tabla.

Script JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
                fn_dar_eliminar();
				fn_cantidad();
                $("#frm_usu").validate({ });
                });
 
			function fn_cantidad(){
				cantidad = $("#grilla tbody").find("tr").length;
				$("#span_cantidad").html(cantidad);
			};
 
            function fn_agregar(){
                cadena = "<tr>";
                cadena = cadena + "<td>" + $("#valor_ide").val() + "</td>";
                cadena = cadena + "<td>" + $("#valor_uno").val() + "</td>";
                cadena = cadena + "<td>" + $("#valor_dos").val() + "</td>";
                cadena = cadena + "<td>" + $("#valor_tres").val() + "</td>";
                cadena = cadena + "<td><a class='elimina'><img src='../css/images/delete.png' /></a></td>";
                $("#grilla tbody").append(cadena);
 
                fn_dar_eliminar();
				fn_cantidad();
            };
 
            function fn_dar_eliminar(){
                $("a.elimina").click(function(){
                    id = $(this).parents("tr").find("td").eq(0).html();
                    respuesta = confirm("Desea eliminar el detalle: " + id);
                    if (respuesta){
                        $(this).parents("tr").fadeOut("normal", function(){
                            $(this).remove();
                           // alert("detalle " + id + " eliminado")
 
                        })
                    }
                });
            };

Form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
</table>
 
                <table class="formulario" border="0"><br />
                    <thead >
                        <tr >
                            <th colspan="8" valign="middle"><img src="../css/images/add.png"  /> Agregar Detalle</th>
                        </tr>
                    </thead>
                    <tbody border="1">
                        <tr>
                            <td>Cantidad</td>
                            <td><input name="valor_ide" type="text" id="valor_ide" size="5"  class="required" /></td>
                            <td>Descripción</td>
                            <td><input name="valor_uno" type="text" id="valor_uno" size="40" class="required" /></td>
                            <td>Precio Unitario</td>
                            <td><input name="valor_dos" type="text" id="valor_dos" size="5" class="required" /></td>
                            <td>Valor Total</td>
                            <td><input name="valor_tres" type="text" id="valor_tres" size="5" class="required" /></td>
                        </tr>
                    </tbody>
 
                    <tfoot>
                        <tr>
                            <td colspan="1"><input name="agregar" type="submit" id="agregar" value="Agregar" /></td>
                        </tr>
                    </tfoot>
                </table>
            </form>
            <table id="grilla" class="lista" border="0" >
              <thead >
                    <tr>
                        <th>Cantidad</th>
                        <th >Descripción</th>
 
                        <th>Precio Unitario</th>
                        <th>Valor Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2</td>
                        <td>Libro de Literaturaibujo</td>
                        <td>5.99</td>
                        <td>11.98</td>
                        <td><a class="elimina"><img src="../css/images/delete.png" /></a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Harold</td>
                        <!--<td>Chiguay</td>-->
 
                        <td>kenshines@hotmail.com</td>
                        <td>Ticona</td>
                        <td><a class="elimina"><img src="../css/images/delete.png" /></a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Howard</td>
 
                        <!--<td>Chiguay</td>-->
                        <td>copa_howard@hotmail.com</td>
                        <td>Ticona</td>
                        <td><a class="elimina"><img src="../css/images/delete.png" /></a></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Gissella</td>
 
                        <!--<td>Ticona</td>-->
                        <td>conecienta@hotmail.com</td>
                        <td>Ticona</td>
                        <td><a class="elimina"><img src="../css/images/delete.png" /></a></td>
                    </tr>
                </tbody>
                <tfoot>
                	<tr>
                    	<td colspan="8"><strong>Cantidad:</strong> <span id="span_cantidad">4</span> articulos.</td>
                    </tr>
 
                    <tr>
                         <td colspan="1"><input name="guardar" type="submit" id="guardar" value="Guardar" /></td>
                    </tr>
                </tfoot>
 
            </table>

Encontre de esta manera recorrer las filas con JQUERY pero no se como enviar la informacion a insertar a la base

1
2
3
4
5
6
7
$('#grilla tr').each(function () {
 
var cantidad= $(this).find('td').eq(0).html();
var descripcion = $(this).find('td').eq(1).html();
var valorUnitario = $(this).find('td').eq(3).html();
 
});
Espero me puedan brindar su ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

guardar filas dinamicas de tabla jquery PHP

Publicado por xve (5515 intervenciones) el 09/01/2014 08:55:39
Hola Alexi, la manera que has utilizado, creo que es la correcta.

Para guardar esa información en una base de datos, lo que yo aria, seria crear un array con todos los valores, para luego pasarlos por json mediante ajax al servidor para grabarlos en la base de datos.

Para guardarlos en un array, yo aria algo como:
1
2
3
4
5
6
7
8
valores=new Array();
$('#grilla tr').each(function () {
    var cantidad= $(this).find('td').eq(0).html();
    var descripcion = $(this).find('td').eq(1).html();
    var valorUnitario = $(this).find('td').eq(3).html();
    valor=new Array(cantidad, descripcion, valorUnitario);
    valores.push(valor);
});

Para enviarlo por ajax a tu archivo php donde lo guardaras, puedes hacerlo algo así:
1
2
3
$.post("archivo.php", {"valores":valores}, function(data){
    ...
},"json")

Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

guardar filas dinamicas de tabla jquery PHP

Publicado por Alex (29 intervenciones) el 10/01/2014 02:11:10
gracias por tu respuesta me servio de mucho pude almacenar todos los valores de la tabla en el array, pero estoy tratando de enviarlos por ajax tal como me comentastes con este :
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 //$('#guardar').live('click',function(){
    $('#guardar').click(function(){
    var $objCuerpoTabla=$("#grilla").children().prev().parent();
         $objCuerpoTabla.find("tbody tr").each(function(){
 
               objDatosColumna= new Array();
 
                var cantidad = $(this).find('td').eq(0).html();
                var descripcion = $(this).find('td').eq(1).html();
                var valorUnit =$(this).find('td').eq(2).html();
                var valorTot =$(this).find('td').eq(3).html();
                    $(this).css("background-color", "#ECF8E0");
 
                valor = new Array(cantidad,descripcion,valorUnit,valorTot);
                objDatosColumna.push(valor);
 
                    $.ajax({
                        type: "post",
                        data:"objDatosColumna",
                        url: "archivo.php",
 
                     objDatosColumna: objDatosColumna,
                     success: function (data) {
                     alert(data);
 
        }
    });
 });
 
    });
 
}
y lo recibo en php de esta manera : ----para ver que me trae.
1
2
3
echo "<pre>";
print_r($_POST);
echo "</pre>";



Pero no me muestra la data que tengo en la tabla sino esto :

1
2
3
4
5
6
7
8
<PRE><br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Use of undefined constant data - assumed 'data' in C:\wamp\www\sistemaplanificacion\vista\archivo.php on line <i>3</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0070</td><td bgcolor='#eeeeec' align='right'>141736</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\sistemaplanificacion\vista\archivo.php' bgcolor='#eeeeec'>..\archivo.php<b>:</b>0</td></tr>
</table></font>
data</PRE>

Quisiera saber como obtener ese array para poder manipularlo en php,disculpa que te moleste xve pero al momento de dar click en el boton, tengo que hacerlo dos veces para que se pueda ejecutar dicho codigo.
Espero me puedas brindar tu ayuda Saludos Cordiales.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

guardar filas dinamicas de tabla jquery PHP

Publicado por Alex (29 intervenciones) el 10/01/2014 04:44:23
XVE antemano gracias nuevamente estuve revisando un poco mas a fondo encontre la falla que esta haciendo era en como recibir el array en php
1
print_r($_POST["objDatosColumna"]);
y a la total lo revise y quedo de esta manera.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
valor = new Array(cantidad,descripcion,valorUnit,valorTot);
                objDatosColumna.push(valor);
 
 
                   // $.post("archivo.php", {"objDatosColumna":objDatosColumna}, function(objDatosColumna){ alert(data); },"json")
 
 
                $.ajax({
                    async: false,
                    type: "POST",
                    url: "archivo.php",
                    data: {
                            objDatosColumna: objDatosColumna
                            },
                    success: function(data) {
                    alert(data);
                    }
                });
y lo obtuve en php de esta manera
1
2
3
4
5
6
<?php
echo "<pre>";
print_r($_POST["objDatosColumna"]);
echo "</pre>";
 
?>

tengo una duda el array llegan los datos fila por fila por decir
dato1 dato2 dato3
y despues llega otro de la misma manera no hay forma de que llegue toda la informacion
para recorrerla y enviar a insertar a la BD.
Saludos Cordiales...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

guardar filas dinamicas de tabla jquery PHP

Publicado por xve (5515 intervenciones) el 10/01/2014 10:27:56
Hola Alex, nos puedes mostrar exactamente que es lo que viene en el array al hacer el print_r?

En principio deberías de poder recorrer todo el array para ir haciendo los insert...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

guardar filas dinamicas de tabla jquery PHP

Publicado por Alex (29 intervenciones) el 10/01/2014 15:56:55
Buenas xve que tal...? el problemita que me esta dando es que el array solo me trae información de la ultima fila ingresada, en este caso he ingreso tres filas y solo me muestra información de la ultima fila de esta manera:

http://sdrv.ms/1a6tMZK

1
<pre>23,CUADERNOS GRANDES,2,22.77</pre>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

guardar filas dinamicas de tabla jquery PHP

Publicado por JOSE LUUS (1 intervención) el 13/09/2014 23:28:45
HOLA al hacer esto en mi pagina php al enviar por ajax print_r($_POST["objDatosColumna"]);
Array
(
[0] => Array
(
[0] => ERTYERTYETY
[1] => 2014-09-13
[2] => 34563456
[3] => 34563456
[4] => 3456345
)

[1] => Array
(
[0] => ERTYERTYETY
[1] => 2014-09-13
[2] => 34563456
[3] => 34563456
[4] => 3456345
)

[2] => Array
(
[valorInput1] => 12
[valorInput2] => 547645676
[valorInput3] => 2014-12-12
[valorInput4] => 6912690
[valorInput5] => DTYDTURTYU
[valorInput6] => 2014
[valorInput7] => ::1
[valorInput8] => 39
[valorInput15] => 34829
)

)
necesito ayuda , ¿como escojo los valores que me llegan en mi lista para poder guardarlos en base ?
quisiera saber como recorro esto en php
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

guardar filas dinamicas de tabla jquery PHP

Publicado por xve (5515 intervenciones) el 14/09/2014 19:45:49
Hola Josue, esto lo puedes recorrer con un par de foreach, no?

Si tu array se llama $miArray, prueba algo así:
1
2
3
4
5
6
7
foreach($miArray as $array1)
{
    foreach($array1 as $key=>$value)
    {
        echo $key."-".$value;
    }
}

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar