如何制作实时可编辑表格？
Posted
技术标签:
【中文标题】如何制作实时可编辑表格？【英文标题】：How to make a live editable table? 【发布时间】：2014-04-15 16:06:48 【问题描述】：我正在尝试使表格像 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>
我从数据库中检索数据，现在我正在尝试更新，但不是只更新我想要的记录它正在更新所有记录而不是之前单击的记录
<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>
【问题讨论】：
这方面有很多插件，比如 jQgrid、Datatables、DrasticGrid。 【参考方案1】：如果你使用组件 jquery？ 看看这个，我用它来做我的公司网站。
https://datatables.net/release-datatables/examples/api/editable.html
从 json 获取数据，这样你就有了可编辑的数据
【讨论】：
我认为这是一个非常好的插件，但对我现在的需求来说太多了，我已经编写了一个解决方案，我将发布它，答案中哪里更好或编辑问题？ oooo，我昨天创建了一个新帐户...但我认为更好的地方是答案。以上是关于如何制作实时可编辑表格？的主要内容，如果未能解决你的问题，请参考以下文章