Question

首先，我只想感谢你看我的帖子。对此，我真的非常感激。这是我的问题 - ＆gt;

比如说我有JSON文档，看起来像这样 - ＆gt;

{＆＃34; superhero＆＃34;：[{＆＃34; hero＆＃34;：＆＃34; Magneto＆＃34;，＆＃34; name＆＃34;：＆＃34; Max Eisenhardt＆＃34 ;，＆＃34; appearances_count＆＃34;：42}，{＆＃34;英雄＆＃34;：＆＃34;超人＆＃34;，＆＃34;名称＆＃34;：＆＃34;克拉克肯特＆＃34; ;，＆＃34; appearances_count＆＃34; 42}]}

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

我的HTML就是这样 - ＆gt;

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

我用来绘制表格的JQuery是这样的 - ＆gt;

$(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。请任何帮助将不胜感激。再次感谢您查看我的帖子。

Answer 1

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

Answer 2

正如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”）与表头完全匹配。或者您可以更改函数以直接传递列号而不是fieldName。此外，我将JSON文档视为标准JS对象 - 假设您已对其进行了解析，然后在需要将其发回时重新进行jsonify。

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

editTable(2, 'Name', 'Spiderman')

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

2 个答案: