Using jQuery to edit individual table cells

Question

How can I use jQuery to click on a table cell and edit its contents. There is a particular column which contains several paragraphs of data, so if possible, have a pop up wi

Answer 1

I use Data tables (a jQuery plugin) as this makes everything so much simpler.

They also say to use the jEditable plugin with their plugin. Allows for rows to become editable: Link: Editable Table (includes code sample)

Answer 2

jEditable plugin can help you edit your table in place.

$(document).ready(function() {
    $('td').editable('http://www.example.com/save.php');
});

Answer 3

Inkedmn's code not functional as it is but it is the simplest way to do it as an idea: So check out the following working code based on his logic:

$(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);
        });                  
    });
});

Answer 4

Try this simple solution:

$(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        var inputNewText = prompt("Enter new content for:", OriginalContent);

        if (inputNewText != null) {
            $(this).text(inputNewText)
        }
    });
});