javascript - 使 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);
    });