Javascript 使用jqueryajax构建唯一表

我有一个脚本，可以构建一个表，并在用户单击单元格时使其可编辑。然后用户留下一条注释，它将更新JSON文件和HTML表

我遇到的问题是，如果我有两个带有单独JSON文件的表，如何在这两个表上实现相同的脚本？每个表需要两个单独的脚本吗？如何根据表的ID执行此操作

JSON1：

[{"GLComment":"comment from table 1","EnComment":""},
{"GLComment":"","EnComment":""}]

JSON2：

[{"GLComment":"comment from table 2","EnComment":""},
 {"GLComment":"","EnComment":""}]

我已经尝试过这样做以附加到现有表中

var tblSomething = document.getElementById("table1");

德国劳埃德船级社评论
评论
//表不是仅为表1构建的
德国劳埃德船级社评论
评论
//这只适用于表1
$（文档）.ready（函数（）{
infoTableJson={}
buildInfoTable（）；
});
函数buildInfoTable（）{
$.ajax（{//允许在不刷新的情况下更新
url:“comment1.json”，//第一个json文件
成功：功能（数据）{
data=JSON.parse（数据）
var-tblSomething=''；
$.each（数据、函数（idx、obj）{
//每个循环用于遍历JSON行
tblSomething+=''；
//每个循环用于遍历JSON列
$。每个（对象、功能（键、值）{
tblSomething+=''+值+''；
});
//tblSomething+=“”
tblSomething+=''；
});
tblSomething+=''；
$（'.table'）.append（tblSomething）
$（'.table td'）。在（'click'，function（）上{
变量行=$（this）.closest（'tr'）
var index=row.index（）；
var comment=row.find（'td:nth child（1）'）.text（）.split（'，'）[0]
var engcomment=row.find（'td:nth child（2）'）.text（）.split（'，'）[0]
var temp1=row.find（'td:nth child（1）'）.text（）.split（'，'）[0]
var temp2=row.find（'td:nth child（2）'）.text（）.split（'，'）[0]
var newDialog=$（“”{
id:“编辑表单”
});
newDialog.append（“GL注释”）；
newDialog.append（“Eng Comment”）；
//jQueryUI对话框
newDialog.dialog({
可调整大小：false，
标题：“编辑”，
身高：350，
宽度：350，
莫代尔：是的，
自动打开：错误，
按钮：[{
文字：“保存”，
单击：函数（）{
控制台日志（索引）；
用户=$.cookie（'IDSID'）
var today=新日期（）；
var date=（today.getMonth（）+1）+'/'+today.getDate（）+'/'+today.getFullYear（）；
var time=today.getHours（）+“：“+today.getMinutes（）+”：“+today.getSeconds（）；
var dateTime=日期+“”+时间；
//修理工
var comment=newDialog.find（'#commentInput'）.val（）+，

“+dateTime+”+user；
var engcomment=newDialog.find（“#engput”）.val（）+”，

“+dateTime+”“+user；//它会更新这两个变量
row.find（'td[data key=“GLComment”]”）。html（comment）//这就是更改表的原因
row.find（'td[data key=“EngComment”]”）。html（EngComment）//这就是更改表的原因
//更新数据
数据[索引].GLComment=comment；
数据[索引].EngComment=EngComment；
$.ajax({
类型：“POST”，
url:“save.asp”，
数据：{'data'：JSON.stringify（数据），'path'：'comments.JSON'}，
成功：函数（）{}，
失败：函数（errMsg）{
警报（errMsg）；
}
});
$（此）.dialog（“关闭”）；
$（this）.dialog（'destroy'）.remove（）
}
}, {
文本：“取消”，
单击：函数（）{
$（此）.dialog（“关闭”）；
$（this）.dialog（'destroy'）.remove（）
}
}]
});
//$（“正文”）.append（newDialog）；
newDialog.dialog（“打开”）；
})
},
错误：函数（jqXHR、textStatus、errorshown）{
警报（'嘿，因为：'+errorbound发生了一些错误，'）；
}
});
}

这里的“键”是预建表。。。对于jQuery方法来说，这是一项很好的工作

$（文档）.ready（函数（）{
//调用函数并传递json url
buildInfoTable（“comment1.json”）；
buildInfoTable（“comment2.json”）；
//只是为了禁用此演示的代码段错误
//所以ajax还没有完成
//无需运行代码段：D
$.ajax=（）=>{}
});
函数buildInfoTable（jsonurl）{
$.ajax({
url:jsonurl，
成功：功能（数据）{
data=JSON.parse（数据）
//克隆预生成表
//并删除预构建类
var dynamicTable=$（“.prebuild”）.clone（）.removeClass（“prebuild”）；
//循环json以创建表行
$.each（数据、函数（idx、obj）{
行=“”；
$。每个（对象、功能（键、值）{
行+=''+值+''；
});
行+=''；
});
//将行追加到克隆的表中
dynamicTable.find（“tbody”）.append（行）
//将克隆的表附加到文档的正文中
$（“正文”）.append（可动态添加）
}
})
}

/*此类隐藏预构建的表*/
.预构建{
显示：无；
}

德国劳埃德船级社评论
评论

hi，也许为每组行创建一个单独的表元素？hi，那么这两个行都在不同的json文件中？还有，你需要在页面加载时做什么？你试过答案了吗？它应该有用。它似乎不起作用

<table class="table 1">
  <thead>
    <th id = "white">GL Comment</th>
    <th id = "white">En Comment</th>
  </thead>
</table>

//table does not get built here only for table 1
<table class="table 2">
      <thead>
        <th id = "white">GL Comment</th>
        <th id = "white">En Comment</th>
      </thead>
</table>

<script>
//this only works for table1
$(document).ready(function() {
  infoTableJson = {}
  buildInfoTable();
});

function buildInfoTable(){
  $.ajax({ //allows to updates without refreshing
    url: "comment1.json", //first json file
    success: function(data){

      data = JSON.parse(data)
      var tblSomething = '<tbody>';

      $.each(data, function(idx, obj){

        //Outer .each loop is for traversing the JSON rows
        tblSomething += '<tr>';

        //Inner .each loop is for traversing JSON columns
        $.each(obj, function(key, value){
          tblSomething += '<td data-key="' + key + '">' + value + '</td>';
        });
        //tblSomething += '<td><button class="editrow"></button></td>'
        tblSomething += '</tr>';
      });
      tblSomething += '</tbody>';
      $('.table').append(tblSomething)
$('.table td').on('click', function() {
             var row = $(this).closest('tr')
             var index = row.index();
      
             var comment = row.find('td:nth-child(1)').text().split(',')[0]
             var engcomment = row.find('td:nth-child(2)').text().split(',')[0]

             var temp1 = row.find('td:nth-child(1)').text().split(',')[0]
             var temp2 = row.find('td:nth-child(2)').text().split(',')[0]
      
              var newDialog = $("<div>", {
                 id: "edit-form"
               });
      
      
             newDialog.append("<label style='display: block;'>GL Comment</label><input style='width: 300px'; type='text' id='commentInput' value='" + comment + "'/>");
             newDialog.append("<label style='display: block;'>Eng Comment</label><input style='width: 300px'; type='text' id='engInput' value='" + engcomment + "'/>");
      
             //  JQUERY UI DIALOG
             newDialog.dialog({
               resizable: false,
               title: 'Edit',
               height: 350,
               width: 350,
               modal: true,
               autoOpen: false,
               buttons: [{
                 text: "Save",
                 click: function() {
      
                console.log(index);
                user = $.cookie('IDSID')
                var today = new Date();
                var date = (today.getMonth()+1)+'/'+today.getDate() +'/'+ today.getFullYear();
                var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                var dateTime = date+' '+time;
                //FIXME
                    
                var comment = newDialog.find('#commentInput').val() + ", <br> <br>" + dateTime + " " + user;
                var engcomment = newDialog.find('#engInput').val() + ", <br><br>" + dateTime + " " + user; //it updates both of them no
      
                   row.find('td[data-key="GLComment"]').html(comment) //this is what changes the table
                   row.find('td[data-key="EngComment"]').html(engcomment) //this is what changes the table
                  // update data
      
                  data[index].GLComment = comment;
                  data[index].EngComment =engcomment;
      
                   $.ajax({
                       type: "POST",
                       url: "save.asp",
                       data: {'data' : JSON.stringify(data) , 'path' : 'comments.json'},
                       success: function(){},
                       failure: function(errMsg) {
                           alert(errMsg);
                       }
                   });
                   $(this).dialog("close");
                   $(this).dialog('destroy').remove()
      
                 }
               }, {
                 text: "Cancel",
                 click: function() {
                   $(this).dialog("close");
                   $(this).dialog('destroy').remove()
                 }
               }]
             });
             //$("body").append(newDialog);
             newDialog.dialog("open");
      
      
           })
      
      
           },
           error: function(jqXHR, textStatus, errorThrown){
           alert('Hey, something went wrong because: ' + errorThrown);
           }
           });
        }
      
        </script>