如何将可编辑的表数据保存到用于绘制表的 JSON

How to save editable table data to JSON which was used to draw the table?

本文关键字：用于 绘制 JSON 保存 数据 编辑      更新时间：2023-09-26

首先，我只想感谢您查看我的帖子。我真的很感激。这是我的问题-->

例如，假设我有JSON文档，看起来像这样-->

{"超级英雄"

：[{"英雄"："万磁王"，"名称"："马克斯·艾森哈特"，"appearances_count"：42}，{"英雄"："超人"，"名字"："克拉克·肯特"，"appearances_count"：42}]}

我用html5和JQuery中的这个JSON文档绘制了一个表格。现在我想编辑我使用 JSON 文档绘制的表元素，并将编辑后的数据保存在该 JSON 文档中。

我的HTML是这样的 -->

 <table>
    <thead>
        <th>Hero</th>
        <th>Name</th>
        <th>AppearanceCount</th>    
    </thead>
    <tbody class="data"></tbody>
 </table>

我用来画桌子的JQuery是这样的-->

$(document).ready(function(){
    $.getJSON("data.json", function(){
    var hero = this['hero'];
    var name = this['name'];
    var numCount = this['appearances_count'];
    var tbodyData = "<tr><td>"+hero+"</td><td>"+name+"</td><td>"+numCount+"</td></tr>"
    $(".data").append(tbodyData);
    });
});

data.json持有上面的json。请任何帮助将不胜感激。再次感谢您查看我的帖子。

关于如何手动执行此操作的答案会太长，但简短的故事是您应该使用支持双向绑定的库，例如 Knockout 或 Angular

正如 Born2Code 所说，最好使用双向绑定库。但是，将表行、字段名称和新值传递给以下函数将使您能够一起更新表和与 JSON 文档对应的对象。

function editTable(row, fieldName, newVal) {
  var column = '';
  // Get column number of target cell from table header
  var fieldElems = document.getElementsByTagName('th');
  for(var i = 0; i < fieldElems.length; i++) {
    if(fieldElems[i].innerHTML == fieldName) {
      column = i + 1;
      break;
    }
  }
  // Update target cell with new value
  document.getElementsByClassName('data')[0].children[row - 1].children[column - 1].innerHTML = newVal;
  // Update JSON document with new value
  data.superhero[row - 1][fieldName] = newVal;
}

为此，您需要确保您的 json 字段名称（例如"hero"）与表标题完全匹配。或者，您可以更改函数以直接传递列号而不是字段名称。此外，我将 JSON 文档视为标准 JS 对象 - 假设您已经解析了它，然后可以在需要将其发送回时重新 json化它。

因此，要更改第二个表行（Clark Kent）的"名称"字段以及JSON文档，您将运行：

editTable(2, 'Name', 'Spiderman')
相关文章：