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
]

您需要两个点击功能：

  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 回答
1

使用http://handsontable.com/ 一个用于 HTML、JavaScript 和 jQuery 的简约的类似 Excel 的数据网格编辑器

于 2013-06-14T09:08:00.920 回答