【发布时间】：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。
标签： jquery html-table jquery-selectors edit live