5


2

HTMLテーブルセルの編集

数行のテーブルがあります…​ 行を選択して[変更]をクリックし、その行のすべてのセルを編集可能にする必要があります…​

Javascriptでセルを編集可能にするにはどうすればよいですか? そして、Jqueryを使用する方が良いですか?

4 Answer


11


独自のコードを作成する必要はありません。この目的のためのjQueryのプラグインは既に存在します。 jEditableを試してください。まさに必要なことを実行できます。

彼らのデモページにはいくつかの素晴らしい例があります:


4


http://jsbin.com/ilupi [クイックコンセプト]をご紹介します。

$(function(){
  $("button[name='doModify']").click(function(){
    // disable out modify button
    $(this).attr("disabled","disabled");
    // enable our save button
    $("button[name='save']").removeAttr("disabled");
    // cycle through each row having marked for modification
    $(":checkbox[name='modify']:checked").each(function(){
      $(this).closest("tr").find("td:gt(0)").each(function(){
        // convert each cell into an editable region
        $(this).wrapInner("");
      });
    });
  });
});

 — --


jon.doe

これは私のバイオです。

jonathan.sampson

これは私のバイオです。

yellow.05

これは私のバイオです。

修正する

Save


4


編集する各要素の `content-editable`プロパティを設定します。 + http://html5demos.com/contenteditable


3


各セル内にテキストボックスを挿入し、値をテーブルセルの値に設定できます。

このようなもの

$(function(){
        $("#tbl1 tr").click ( function(){
            if ( !$(this).hasClass('clicked') )
            {
                $(this).children('td').each ( function() {
                    var cellValue = $(this).text();
                    $(this).text('').append ( "" );
                });

                $(this).addClass('clicked');
            }
        });
    });


                1

4

3

4

5

6

その後、更新ボタンを配置して、テキストボックスから値を取得して更新できます。