https://stackoverflow.com/questions/22336000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianand if you use a component jquery? look this, I use this for my company site.
https://datatables.net/release-datatables/examples/api/editable.html
get data from json so you hava a editable data
How to make a live editable table?
-
13-06-2023 - |
سؤال
I'm trying to make a table editable like Excel or Google docs, only need to update the fields not make sums or any other function, there is what I have right now:
<table border="1">
<thead>
<tr>
<th>brand</th>
<th>model</th>
<th>color</th>
</tr>
</thead>
<tbody>
<?php foreach ($autos->results() as $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 the data from a database, now I'm trying to update but instead of update only the record that I want It is updating all the recods than 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 like 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 like 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>
## One Solution ## I have come with the solution, now I know there are tools for this need, but if you don't want or need all that functionality, or simply are training yourself you can take a look of my own solution and comment which way it could be improved.
This code allows you to dynamically update easily a td content of a table, no more no less, it is what it is.
<?php
include_once 'core/init.php';
$autos = DB::getInstance()->query("SELECT * FROM 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 you bind the "dale" function with a click */
$("td").on("click", dale);
function dale(){
/* Here yoy exchange the content of the table td element for an input
with the same value as before, ready for be edited */
$("td").off("click",dale);/* this line unbind the click cause for now is 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 you listen to the keyboard input */
nuevo = editando.val();
console.log(nuevo);
liveEditing = true;
});
$(document).one("mouseup",function(){ /* this allows to click outside and exchange again the content of td, the ubication of this element is key because nevetheless
is an "one" event it ocurrs everytime function "dale" is
called, this is a very 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 you click outside(you also can sipmly add an "enter" keypress too)
now you can replace the content of td with the new one (nuevo)
you can also use $.post to insert it in the database ang get a response with
true value or with the value just 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() as $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>
المحلول
لا تنتمي إلى StackOverflow
