使用jQuery编辑单个表格单元格
如何使用jQuery单击表格单元格并编辑其内容。有一个包含多段数据的特定列，所以如果可能的话，有一个带有大文本区域的弹出式窗口（或理想的HTML编辑器）。使用jQuery编辑单个表格单元格
这些改变只是表面上的，因为我使用另一个jQuery插件来抓取表格内容并将其导出到其他东西。
难度，没有一个单元格可以有唯一的名称或ID。
$("td").click(function(event){
var myText = '';
$("myOverlayThing").show();
$("myOverlayThingCloseLink").click(function(event){
event.preventDefault();
myText = $("myOverlayThing.textarea").val();
});
$(this).html(myText);
});
大概比这个稍微复杂一点，但这是没有看到你的HTML的基本思想。
jEditable插件可以帮助你编辑你的表。
$(document).ready(function() {
$('td').editable('http://www.example.com/save.php');
});
使内容编辑都可以用类似的jQuery Editable一个插件来实现。虽然我不太确定，但翻译成不带ID的桌子是多么容易。
要遍历你的表（我假设你的表可能有其自身的ID或者是页面上的唯一表）是合理的直线前进，如果你能得到该插件工作：
$('#myTable td').editable();
但是，这并不能为您提供丰富的文本编辑器。另一种方法是忘记该插件并尝试使用jQuery UI对话框。
$('#myTable td').click(function(){
$('myDialog').dialog('open');
});
假设你把一个富文本编辑器，在该对话框中，你可以使用$阿贾克斯（），以在服务器端的结果张贴到一些服务。
最后，jqGrid对您来说可能是一个很好的选择，具体取决于您在表格中需要的数据。
Inkedmn的代码不起作用，因为它是，但它是做它作为一种思想的最简单方法： 所以检查出基于他的逻辑下面的工作代码：
$(function() {
$('#overlay').hide();
$('td').click(function(event) {
var myText = '';
$('#overlay').show();
var o = $(this);
$('#closeLink').click(function(event) {
event.preventDefault();
myText = $('#overlay textarea').val();
$(o).html(myText);
$(this).parent().hide(500);
});
});
});
我用Data tables (a jQuery plugin)，因为这使得一切都非常简单。
他们还说要在插件中使用jEditable插件。允许行成为可编辑的：Link: Editable Table（包括代码示例）
试试这个简单的解决方案：
$(function() {
$("td").dblclick(function() {
var OriginalContent = $(this).text();
var inputNewText = prompt("Enter new content for:", OriginalContent);
if (inputNewText != null) {
$(this).text(inputNewText)
}
});
});
看到，因为这个页面是怎么都只有3岁，在谷歌搜索我认为这是由于更多的最新答案的第一个结果。鉴于上述插件选项的重要性和复杂性，我认为寻找替代品的人可能更喜欢更简单，没有多余的，更直接的解决方案。
这替换为文本输入表格单元格，并调用自定义事件，因此您可以处理您要在保存，关闭，模糊不管用的情况下，等...
在这种情况下，改变的唯一途径单元格中的信息是按下输入，但您可以自定义，如果你喜欢，例如。你可能想保存模糊。
在这个例子中，您也可以按Esc键停止编辑并将单元格恢复到原来的状态。如果你喜欢，你可以自定义。
这个例子只需点击一下，但有些人更喜欢doubleclick，你的选择。
$.fn.makeEditable = function() {
$(this).on('click',function(){
if($(this).find('input').is(':focus')) return this;
var cell = $(this);
var content = $(this).html();
$(this).html('<input type="text" value="' + $(this).html() + '" />')
.find('input')
.trigger('focus')
.on({
'blur': function(){
$(this).trigger('closeEditable');
},
'keyup':function(e){
if(e.which == '13'){ // enter
$(this).trigger('saveEditable');
} else if(e.which == '27'){ // escape
$(this).trigger('closeEditable');
}
},
'closeEditable':function(){
cell.html(content);
},
'saveEditable':function(){
content = $(this).val();
$(this).trigger('closeEditable');
}
});
});
return this;
}
您可以选择通过将它们像这样应用可编辑的细胞，或任何有意义的你的情况。
$('.editable').makeEditable();
这居然是如此直截了当， 这是我的HTML，jQuery的样品..它就像一个魅力，我建立使用在线JSON数据样本的所有代码。 欢呼
< < HTML >>
<table id="myTable"></table>
< <的jQuery >>
<script>
var url = 'http://jsonplaceholder.typicode.com/posts';
var currentEditedIndex = -1;
$(document).ready(function() {
$.getJSON(url, function (json) {
var tr;
tr = $('<tr/>');
tr.append("<td>ID</td>");
tr.append("<td>userId</td>");
tr.append("<td>title</td>");
tr.append("<td>body</td>");
tr.append("<td>edit</td>");
$('#myTable').append(tr);
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].id + "</td>");
tr.append("<td>" + json[i].userId + "</td>");
tr.append("<td>" + json[i].title + "</td>");
tr.append("<td>" + json[i].body + "</td>");
tr.append("<td><input type='button' value='edit' id='edit' onclick='myfunc(" + i + ")' /></td>");
$('#myTable').append(tr);
}
});
});
function myfunc(rowindex) {
rowindex++;
console.log(currentEditedIndex)
if (currentEditedIndex != -1) { //not first time to click
cancelClick(rowindex)
}
else {
cancelClick(currentEditedIndex)
}
currentEditedIndex = rowindex; //update the global variable to current edit location
//get cells values
var cell1 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").text());
var cell2 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").text());
var cell3 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").text());
var cell4 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").text());
//remove text from previous click
//add a cancel button
$("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").append(" <input type='button' onclick='cancelClick("+rowindex+")' id='cancelBtn' value='Cancel' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").css("width", "200");
//make it a text box
$("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").html(" <input type='text' id='mycustomid' value='" + cell1 + "' style='width:30px' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").html(" <input type='text' id='mycustomuserId' value='" + cell2 + "' style='width:30px' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").html(" <input type='text' id='mycustomtitle' value='" + cell3 + "' style='width:130px' />");
$("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").html(" <input type='text' id='mycustomedit' value='" + cell4 + "' style='width:400px' />");
}
//on cancel, remove the controls and remove the cancel btn
function cancelClick(indx)
{
//console.log('edit is at row>> rowindex:' + currentEditedIndex);
indx = currentEditedIndex;
var cell1 = ($("#myTable #mycustomid").val());
var cell2 = ($("#myTable #mycustomuserId").val());
var cell3 = ($("#myTable #mycustomtitle").val());
var cell4 = ($("#myTable #mycustomedit").val());
$("#myTable tr:eq(" + (indx) + ") td:eq(0)").html(cell1);
$("#myTable tr:eq(" + (indx) + ") td:eq(1)").html(cell2);
$("#myTable tr:eq(" + (indx) + ") td:eq(2)").html(cell3);
$("#myTable tr:eq(" + (indx) + ") td:eq(3)").html(cell4);
$("#myTable tr:eq(" + (indx) + ") td:eq(4)").find('#cancelBtn').remove();
}
</script>
我试了一下，它是所有消失的细胞，它留下空。 – mrpatg 2009-08-03 21:56:48