Make the html table editable and enable the button for each line when changing the text in this line

Question

I have an html table that looks like this:

    <table id="tree">
        <tr id="foo-1">
            <td>fooId1</td>
            <td>fooName1</td>
            <td>fooCsv1</td>
            <td><button id="button-1" type="button" disabled>Save</button></td>
        </tr>
        <tr id="foo-2">
            <td>fooId2</td>
            <td>fooName2</td>
            <td>fooCsv2</td>
            <td><button id="button-2" type="button" disabled>Save</button></td>
        </tr>
    </table>

There are two modifications that I want to make for this table:

- Firstly, I want to make the elements fooName and fooCsv td editable (in fact, there are several more editable columns, but I just use two to simplify this example). I know that I can just enter the input inside the td element and set the value, but wondered if there is an easier way.

- , "" , , /copy -paste/etc. googled , , , , , , .

, , html javascript, , - , ?

Answer 1

        <td contenteditable="true">fooName1</td>

, HTML

:

http://jsfiddle.net/9yyKN/11/

//Listen to blur event in contenteditable td elements 
    $('td[contenteditable=true]').blur(function () {
      $(this).parent('tr').find('button').removeAttr('disabled');

    });
//When a button is clicked find the nearest contenteditable td //element(s) and push their 
text content to an array, this array is later being posted.
    $('button').click(function () {
        var contents = $(this).parents().find('td[contenteditable=true]');
        var contentArray = [];
        for (i = 0; i < contents.length; i++) {
            contentArray[i] = contents[i].innerHTML;
        }
        $.post("test.php", contentArray);
    });