PivotTable jquery clone () remove () ..
Then leave one example of a table where you add and delete rows dynamically, with the help of jquery:
jquery.js = http: //code.jquery.com/jquery-1.9.1.js
jqueryui.js = http://code.jquery.com/ui/1.10.2/jquery-ui.js
copies the contents of such links and save them in the folder with the same name endicado before above (=) sign now we see with our html code or can download the complete example from: https://copy.com/iKMBz8EoHUNU ):
at the end of this entry is the functional demo of the table ...
html
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<Title> Untitled Document </ title>
</ Head>
<Body>
</ Body>
</ Html>
<Html>
<Head>
<Script src = "jquery.js"> </ script>
<Script src = "jqueryui.js"> </ script>
<Script>
$ (Function () {
$ ( "#tabs") .tabs ();
});
$ (Function () {
// Clone the hidden row that has the base camps, and added to the end of the table
$ ( "# Add"). On ( 'click', function () {
$ ( "# Tbody table tr: eq ()") clone () append ( '<td class = "delete"> <input class = "a" type = "button" value = "-" /> </.. td> ') appendTo ( "# table.");
});
// Event to select the row and deletes
$ (Document) .on ( "click". "Delete" function () {
var parent = $ (this) .parent ();
$ (Parent) .remove ();
});
});
</ Script>
<H1> Example </ h1>
<Table border = "1" id = "table">
<- Header table ->
<Thead>
<Tr>
<Th> Value </ th>
<Th> Name </ th>
<Th> </ th>
<Th> & nbsp; </ th>
</ Tr>
</ Thead>
<! - Body of the table with fields ->
<Tbody>
<! - Row basis to clone and added to the end ->
<Tr id = "row-based">
<Td> <input id = "value" name = "value []" type = "text" /> </ td>
<Td> <select id = "" name = "name []">
<Option value = "" disabled = "disabled" selected = "selected"> Select ... </ option>
<Option value = "FR"> FR </ option>
<Option value = "FR"> FC </ option>
<Option value = "PA"> PA </ option>
<Option value = "Glisemia"> Glisemia </ option>
</ Select>
</ Td>
</ Tr>
<- Order code: Base Row ->
</ Tbody>
</ Table>
<! - Button to add rows ->
<Input type = "button" class = "a" id = "add" value = "+" />
</ Body>
</ Html>
Then leave one example of a table where you add and delete rows dynamically, with the help of jquery:
jquery.js = http: //code.jquery.com/jquery-1.9.1.js
jqueryui.js = http://code.jquery.com/ui/1.10.2/jquery-ui.js
copies the contents of such links and save them in the folder with the same name endicado before above (=) sign now we see with our html code or can download the complete example from: https://copy.com/iKMBz8EoHUNU ):
at the end of this entry is the functional demo of the table ...
html
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<Title> Untitled Document </ title>
</ Head>
<Body>
</ Body>
</ Html>
<Html>
<Head>
<Script src = "jquery.js"> </ script>
<Script src = "jqueryui.js"> </ script>
<Script>
$ (Function () {
$ ( "#tabs") .tabs ();
});
$ (Function () {
// Clone the hidden row that has the base camps, and added to the end of the table
$ ( "# Add"). On ( 'click', function () {
$ ( "# Tbody table tr: eq ()") clone () append ( '<td class = "delete"> <input class = "a" type = "button" value = "-" /> </.. td> ') appendTo ( "# table.");
});
// Event to select the row and deletes
$ (Document) .on ( "click". "Delete" function () {
var parent = $ (this) .parent ();
$ (Parent) .remove ();
});
});
</ Script>
<H1> Example </ h1>
<Table border = "1" id = "table">
<- Header table ->
<Thead>
<Tr>
<Th> Value </ th>
<Th> Name </ th>
<Th> </ th>
<Th> & nbsp; </ th>
</ Tr>
</ Thead>
<! - Body of the table with fields ->
<Tbody>
<! - Row basis to clone and added to the end ->
<Tr id = "row-based">
<Td> <input id = "value" name = "value []" type = "text" /> </ td>
<Td> <select id = "" name = "name []">
<Option value = "" disabled = "disabled" selected = "selected"> Select ... </ option>
<Option value = "FR"> FR </ option>
<Option value = "FR"> FC </ option>
<Option value = "PA"> PA </ option>
<Option value = "Glisemia"> Glisemia </ option>
</ Select>
</ Td>
</ Tr>
<- Order code: Base Row ->
</ Tbody>
</ Table>
<! - Button to add rows ->
<Input type = "button" class = "a" id = "add" value = "+" />
</ Body>
</ Html>
Bonito solo para mostrar info, ya que si deseas guardar en una base de datos, no podras ya que solo estas clonando los objetos.
ResponderEliminarde hecho es funcional para guardar en Database, yo este mismo ejemplo lo implemento en sistemas que desarrollo, si puede guardar en db xq se genera lun array al darle sumit, lo q debes hacer es cuando lo recibas, lo hagas como un arreglo y te llegaran completos los datos
Eliminarhola amigo me podrias ayuda a guardar en la base de datos un ejomplo como este
Eliminarhola Jose miguel,
ResponderEliminarmuy bueno y funcional, pero a la hora de capturar el input en jquery y enviarlo para el DB, no logro
name="nombre[]", no me calcula por separado no me da el array....algun truco ?
hola hermano, bueno lo he probado en php espero te sirva:
Eliminar-------------------------------------------------------------
En el html: defines tu input dentro de la etiqueta form:
input id="valor" name="valor[]" type="text" required="required"/>
------------------------------------------------------------------------------
En el documento que recibe:
Recojes los datos del form enviado:
$req = $request->request->all();
// var_dump($req);die; // Tambien es opcional descomentar esta línea para ver que retorna el form
$valor = $req["valor"];
if ($totc>0 && count($nombre) == $totc){
for($i=0;$i<$totc;$i++) {
//ACA COLOCAS TU INSERT INTO Y TU VALOR ($valor[$i]) A INSERTAR LO HACES ASI:
INSERT INTO "nombre_tabla" ("columna1", "columna2", ...)
VALUES ("$valor[$i]", "valor2", ...);
} // FIN FOR
}//Fin if
Deberia funcionar
Te recomiendo utilizar el complemento para mozilla firefox : FIREBUG, excelente herramienta al momento de verificar el html
Espero te sirva, disculpa la tardanza al momento de responder, Saludos desde Venezuela
Hola, Miguel..gracias por tu ayuda, quiero preguntarte como hago para que sea un JSP el documento que recibe, me explico: que cuando se de clic en el boton menos, se tome el id de la fila y luego sea un jsp quien elimine en la base de datos...muchas gracias!
EliminarLaura
gracias hermano, saludos desde Colombia...
ResponderEliminarExcelente... Gracias
ResponderEliminarPodrias por favor subir el codigo gracias
ResponderEliminarhttps://copy.com/iKMBz8EoHUNU aca puedes encontrar el codigo
ResponderEliminarQue pena amigo me dice que esta en mantenimiento podrias colocarlo en algun otro medio te lo agradezo mucho
ResponderEliminarAca esta amigo https://drive.google.com/file/d/0B0BUJclZnp3NQUJhSmR4SzNSdmc/view?usp=sharing
Eliminarhttps://drive.google.com/file/d/0B0BUJclZnp3NQUJhSmR4SzNSdmc/view?usp=sharing
ResponderEliminarMil gracias un saludo
ResponderEliminar