使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元素中放入一个输入并设置值,但是想知道是否有更简单的方法.

- 其次,当用户通过键入/ copy-paste/etc更改该行中的文本时,我希望每行中的"保存"按钮变为启用状态.我用google搜索并发现我可以通过为输入事件添加处理程序来做到这一点,但我不确定最简单的方法来合并它,我不确定它是否有第一个分支我的任务.

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