创建由 JSON 生成的可编辑表答案

【问题标题】：Creating editable table which is generated by JSON创建由 JSON 生成的可编辑表
【发布时间】：2017-07-27 02:19:40
【问题描述】：

我有这个功能可以正确生成一些单词的表格：

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

【问题讨论】：

标签： jquery json html-table

【解决方案1】：

我不知道您遇到了什么错误，但这里是 demo。在演示中，我使用了一组颜色，如下所示：

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

你需要两个点击函数：

点击颜色时显示文本框：

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

当点击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;
  }
});

点击顶部的演示查看更新:)

希望这会有所帮助:)

【讨论】：

感谢您提供这么好的代码。但是在您的代码中编辑后，单元格的值不会改变。
@bahittin 你需要文本框旁边的保存按钮还是必须通过模糊事件保存它？
在单元格上写新词后，用户敲回车或点击其他地方需要保存。
感谢按钮，但我们可以在没有按钮的情况下执行此操作吗？输入新单词后点击回车即可。

【解决方案2】：

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

【讨论】：