我正在尝试制作诸如excel或google文档之类的表格，只需要更新字段而不是求和或任何其他功能，我现在拥有的是：
<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>
我从数据库中检索数据，现在我正在尝试更新，但不仅更新我想要的记录正在更新所有的recod，而不是单击
<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>
表像这样开始：
<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>
这样完成：
<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>
##一个解决方案## 我已经提供了解决方案，现在我知道有一些需要的工具，但是如果您不想要或需要所有这些功能，或者只是在训练自己，您可以看一下我自己的解决方案，并评论哪种方式可以改进。
此代码允许您轻松地更新表的TD内容，不再是它。
。 <?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>
，如果您使用组件jQuery？看这个，我将其用于我的公司网站。
https://datatables.net/release-datatables/exampleass/api/editable.html
从JSON获取数据，因此您可以编辑数据