使 html 表格可编辑，并在该行中的文本更改时启用每行按钮

Question

我有一个如下所示的 html 表格：

    <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>

我想对这张表做两处修改：

-首先，我想让 fooName 和 fooCsv td 元素可编辑（实际上还有几个可编辑的列，但我只是使用两个列来简化此示例）。我知道我可以简单地在 td 元素中输入一个输入并设置值，但想知道是否有更简单的方法。

-其次，当用户通过键入/复制粘贴/等更改该行中的文本时，我希望启用每行中的“保存”按钮。我用谷歌搜索，发现我可以通过为输入事件添加处理程序来做到这一点，但我不确定合并它的最简单方法，我不确定它是否对第一个有影响我的任务。

如果我对 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);
    });