我正在尝试将表格编辑为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>
我从数据库中检索数据，现在我正在尝试更新，而不是只更新我想要的记录它正在更新所有的recods而不是以前点击过的
<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>
## One Solution ## 我已经找到了解决方案，现在我知道有这种需求的工具，但是如果你不想要或不需要所有这些功能，或者只是自己训练，你可以看看我自己的解决方案并评论它可能的方式得到改善。
此代码允许您轻松动态更新表格的内容，不多也不少，就是它。
<?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>
答案 0 :(得分：1)
如果你使用组件jquery？ 看看这个，我将它用于我的公司网站。
https://datatables.net/release-datatables/examples/api/editable.html
从json获取数据，以便获得可编辑的数据