jquery - How to make a live editable table? -
i'm trying make table editable excel or google docs, need update fields not make sums or other function, there have right now:
<table border="1"> <thead> <tr> <th>brand</th> <th>model</th> <th>color</th> </tr> </thead> <tbody> <?php foreach ($autos->results() $auto) { ?> <tr> <td><?php echo $auto->marca; ?></td> <td><?php echo $auto->modelo; ?></td> <td><?php echo $auto->color; ?></td> </tr> <?php } ?> </tbody> </table> i retrieve data database, i'm trying update instead of update record want updating recods have been previusly clicked
<script type="text/javascript"> var editing = 0; var obejetivo = 0; var nuevovalor =""; function editar(elemento, actualval){ if (!editing) { elemento.html("<input class=\"livetd\" type=\"text\" value=\""+actualval+"\">"); editing = 1; var editando = elemento.children(); editando.on("input",function(){ var nuevovalor = editando.val(); }); return nuevovalor; } } function clickafuera(){ } function action(element,indice){ var actualval = element.text(); nuevovalor = actualval; if (!editing) { element.html("<input class=\"livetd\" type=\"text\" value=\""+actualval+"\">"); var editando = element.children(); editando.on("input",function(){ nuevovalor = editando.val(); }); editing = 1; } var esto = element; $(document).on("click", function(event) { if($(event.target).parents().index(esto) == -1) { element.html(nuevovalor); console.log(esto) editing = 0; } }); }; $(document).on("click","td", function(){ var indice = $(this).index(); var tdactual = $(this); action(tdactual,indice); }); </script> the table start this:
<table border="1"> <thead> <tr> <th>marca</th> <th>modelo</th> <th>color</th> </tr> </thead> <tbody> <tr> <td>bmw</td> <td>m3</td> <td>azul celeste</td> </tr> <tr> <td>porsche</td> <td>cayman</td> <td>plata</td> </tr> </tbody> </table> and finish this:
<table border="1"> <thead> <tr> <th>marca</th> <th>modelo</th> <th>color</th> </tr> </thead> <tbody> <tr> <td>bmw</td> <td>bmw</td> <td>bmw</td> </tr> <tr> <td>bmw</td> <td>bmw</td> <td>bmw</td> </tr> </tbody> ## 1 solution ## have come solution, know there tools need, if don't want or need functionality, or training can take of own solution , comment way improved.
this code allows dynamically update td content of table, no more no less, is.
<?php include_once 'core/init.php'; $autos = db::getinstance()->query("select * autos"); ?> <html> <head> <title>live update</title> <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script> <script type="text/javascript"> var liveediting = false; var nuevo =""; var actual=""; var td; $(document).ready(function(){ /* here bind "dale" function click */ $("td").on("click", dale); function dale(){ /* here yoy exchange content of table td element input same value before, ready edited */ $("td").off("click",dale);/* line unbind click cause necesary no more */ td = $(this); actual = $(this).text().trim(); nuevo = actual; $(this).html("<input class=\"livetd\" type=\"text\" >"); var editando = $(this).children(); editando.val(actual); editando.focus(); editando.on("input",function(){ /* here listen keyboard input */ nuevo = editando.val(); console.log(nuevo); liveediting = true; }); $(document).one("mouseup",function(){ /* allows click outside , exchange again content of td, ubication of element key because nevetheless "one" event ocurrs everytime function "dale" called, useful trick */ liveediting = true; }); }; function becometrue(){ } $(document).on("click", function(event) { console.log(liveediting); if (liveediting) { if($(event.target).parents().index(td) == -1 && liveediting == true ) { /* if click outside(you can sipmly add "enter" keypress too) can replace content of td new 1 (nuevo) can use $.post insert in database ang response true value or value updated*/ td.html(nuevo); $("td").on("click",dale); liveediting = false; console.log("liveed: " + liveediting); } } }); }); </script> </head> <body> <table border="1"> <thead> <tr> <th>brand</th> <th>model</th> <th>color</th> </tr> </thead> <tbody> <?php $i=0; foreach ($autos->results() $auto) { ?> <tr> <td id="td<?php echo $i; $i++; ?>"> <?php echo $auto->marca; ?> </td> <td id="td<?php echo $i; $i++; ?>"><?php echo $auto->modelo; ?></td> <td id="td<?php echo $i; $i++; ?>"><?php echo $auto->color; ?></td> </tr> <?php } ?> </tbody> </table> </body> </html>
and if use component jquery? this, use company site.
https://datatables.net/release-datatables/examples/api/editable.html
get data json hava editable data
Comments
Post a Comment