3

次のような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>

このテーブルには、次の 2 つの変更を加える必要があります。

-まず、fooName と fooCsv の td 要素を編集可能にします (実際には編集可能な列がさらにいくつかありますが、この例を簡単にするために 2 つだけ使用しています)。入力を td 要素内に配置して値を設定するだけでよいことはわかっていますが、もっと簡単な方法があるかどうか疑問に思っていました。

-2 番目に、ユーザーが入力/コピー/貼り付けなどでその行のテキストを変更したときに、各行の [保存] ボタンが有効になるようにします。私はグーグルで検索し、入力イベントのハンドラーを追加することでこれを実行できる可能性があることを発見しましたが、これを組み込む最も簡単な方法がわからず、最初に影響があるかどうかもわかりません私が持っているタスク。

HTMLとJavaScriptについてよく知っていればこれは簡単だと思いますが、私は知らないので、私がやろうとしていることを達成する簡単な方法を知っている人はいますか?

4

1 に答える 1

6 
        <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);
    });
于 2013-06-22T02:14:50.077 に答える