Jquery 如何创建活动的可编辑表？
我正在尝试使表格像Excel或Google docs一样可编辑，只需更新字段，而不需要进行求和或任何其他功能，我现在有：Jquery 如何创建活动的可编辑表？,jquery,html-table,jquery-selectors,edit,live,Jquery,Html Table,Jquery Selectors,Edit,Live,我正在尝试使表格像Excel或Google docs一样可编辑，只需更新字段，而不需要进行求和或任何其他功能，我现在有： <table border="1"> <thead> <tr> <th>brand</th> <th>model</th> <th>color&l
<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>
var=0；
var obejetivo=0；
var nuevovalor=“”；
函数编辑器（元素、实际值）{
如果（！编辑）{
html（“”）；
编辑=1；
var editando=elemento.children（）；
editando.on（“输入”，函数（）{
var nuevovalor=editando.val（）；
});
回归新锐；
}
}
函数clickAfuera（）{
}
功能动作（元素、标记）{
var actualVal=element.text（）；
新价值=实际价值；
如果（！编辑）{
html（“”）；
var editando=element.children（）；
editando.on（“输入”，函数（）{
newovalor=editando.val（）；
});
编辑=1；
}
var-esto=元素；
$（文档）。在（“单击”）上，函数（事件）{
if（$（event.target）.parents（）.index（esto）=-1{
html（nuevovalor）；
控制台日志（esto）
编辑=0；
}
});
};
$（文档）。在（“单击”，“td”，函数（）上）{
var indice=$（this.index（）；
var tdActual=$（此）；
动作（实际、指示）；
});
<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>
马卡
摩洛
颜色
宝马
m3
蓝宝石
保时捷
开曼群岛
普拉塔
<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>
实时更新
var-liveEditing=false；
var nuevo=“”；
var实际值=”；
var-td；
$（文档）.ready（函数（）{
/*在这里，您可以通过单击绑定“dale”函数*/
$（“td”）。点击（戴尔）；
函数dale（）{
/*在这里，您可以将table td元素的内容交换为输入
使用与前面相同的值，准备进行编辑*/
$（“td”）.off（“click”，dale）；/*现在不需要此行解除单击原因的绑定*/
td=$（本次）；
实际值=$（this.text（）.trim（）；
新潮=实际；
$（this.html（“”）；
var editando=$（this.children（）；
editando.val（实际值）；
editando.focus（）；
在（“input”，function（）{/*中，您可以收听键盘输入*/
nuevo=editando.val（）；
控制台日志（新潮）；
liveEditing=true；
});
$（document）.one（“mouseup”，function（）{/*这允许在外部单击并再次交换td的内容，此元素的ublication是关键，因为它永远不会丢失
是一个“一”事件，每次函数“dale”都会发生
这是一个非常有用的技巧*/
liveEditing=true；
});
};
函数becomeTrue（）{
}
$（文档）。在（“单击”）上，函数（事件）{
console.log（liveEditing）；
如果（实时编辑）{
if（$（event.target）.parents（）.index（td）=-1&&liveEditing==true）{
/*如果您单击外部（您也可以轻轻添加一个“回车”键）
现在，您可以用新的内容（nuevo）替换td的内容
您还可以使用$.post将其插入数据库中，并使用获得响应
值为true，或值刚刚更新*/
td.html(nuevo),；
$（“td”）。点击（戴尔）；
liveEditing=false；
log（“liveEd:+liveEditing”）；
}
}
});
});
品牌
模型
颜色