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

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

1 个答案: