1

私はいくつかの単語のテーブルを正しく生成するこの関数を持っています:

function show(json) {
    var content = '<table id = "myTable" border = 1>';
    var counter;
    for (counter = 0; counter < json.length; counter++) {
        content += '<tr><td class = "topics">' + json[counter]['topic_name'] + '</td>'
        '</tr>';
    }
    content += '</table>';
    $('#table_here').append(content);
}

このテーブルを編集可能にしたいので、ユーザーがテーブルのセルをクリックしたときにそのセルを編集する必要があります。だから私はオンラインのチュートリアルの助けを借りてこれを書きました：

function show(json) {
    var content = '<table id = "myTable" border = 1>';
    var counter;
    for (counter = 0; counter < json.length; counter++) {
        content += '<tr id =' + counter + ' class="edit_tr"><td class = "edit_td"><span id = "first_' + counter + '" class="text">' + json[counter]['topic_name'] + '</span><input type="text" value="' + json[counter]['topic_name'] + '" class="editbox"  id = "first_input_' + counter + '" /&gt;></td>'
        '</tr>';
    }
    content += '</table>';
    $('#table_here').append(content);
}

このページを開くと、セル内の単語とそのセル内のボックス内の単語の両方が同時に表示されます。ページのどこかをクリックすると、ボックスが消えて単語だけが残りますが、クリックしても何も起こりません言葉。どうすればこれを修正できますか? このチュートリアルからコードを取得します: http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html

4

2 に答える 2

2

あなたが直面しているエラーはわかりませんが、ここにdemo. デモでは、次のような色の配列を使用しました。

[
 {
  "colorName": "red",
  "hexValue": "#f00"
 },
 {
   "colorName": "green",
   "hexValue": "#0f0"
 },
 .. so on
]

2 つのクリック機能が必要です。

  1. 色をクリックしたときにテキスト ボックスを表示するには:

    $(document).on("click", ".edit_td", function () {
   //reset to default, hide every input and show span in table
   $("input:text").hide();
   $(".text").show();
   $(this).find("span").hide().end().find("input:text").show();
});

  2. 以外の場所をクリックしたときにテキストボックスを非表示にしてスパンを表示するにはtable

    $(document).on("click", function (event) {
  var $target = $(event.target);
  if ($target.closest("table").length == 0) {
    var $input = $("input:text:visible");
    var value = $input.val();
    $input.closest("td").find(".text").text(value).show();
    $input.parent().hide();
  }

    });

編集 ：

keyupそれに接続されている入力ボタンのハンドラーを追加しました。

$(document).on("keyup", "input:text", function (e) {
  if (e.which === 13) {
    var value = $(this).val();
    $(this).closest("td").find(".text").html(value).show();
    $(this).parent().hide();
    return false;
  }
});

上部のデモをクリックして、更新を確認してください:)

お役に立てれば ：）

于 2013-06-14T08:57:35.703 に答える