Question

我有一个表单，可以在双击表格中的每一行时显示。可以更新此表单的值，并提交表单以及所有行更改。但是每次我双击一行并编辑该行的那个表格的值时，我改变的先前值都会被覆盖。为了解决这个问题，我尝试将所有更改添加到地图中，其中行id作为键，表单的值作为值。但表单仍然不会使用新值更新。这是一个演示我的意思的小提琴：

https://jsfiddle.net/4fr3edk7/2/

如果我双击显示“Adam Smith”的行并将该名称更改为John Doe，当我双击第二行然后再次双击“Adam Smith”时，它应该说“John”on第一个文本框和第二个“Doe”。但新价值似乎永远不会存在。

此代码段循环遍历每个键，然后循环遍历该键的每个值：

for(var i = 0; i<key.length; i++){
    var getval = globalchanges[key[i]];
  for(var k=0; k<getval.length; k++){
        $("#input1").val(getval[0]);
      $("#input2").val(getval[1]);
  }
 }

如何保存新的更改？（表行不必显示更改，只需显示文本框值）。任何帮助将不胜感激。

Answer 1

由于这部分你需要重新考虑你的逻辑

$("#table tr").dblclick(function(){
   $("#txtbox-wrapper").css({"display" : "block"});
    var id = $(this).find('td').eq(0).text();

    $("#input1").val($(this).find('td').eq(1).text());
    $("#input2").val($(this).find('td').eq(2).text());

    $("#savebtn").click(function(){
      addToMap(id);
    });
});

- 每次 - 双击要为savebtn元素添加新点击绑定的表格行。这意味着如果双击两行，当您单击该按钮时，它将为两个ID执行addToMap。您的逻辑可能还有其他问题，仅依赖于多行的其他两个输入，但这种双/三/ +绑定会让您感到厌烦。

Answer 2

首先，如@Taplar所述，您将多次绑定click事件。您的方法足够接近，存储更改的想法是有效的。您应该有2个函数，在按钮单击时存储更改，第二个函数按ID检索更改。

Updated Fiddle

此函数将获取表单的值，并将存储在全局对象

中

function setMap(id){
    var firstrow =  $("#input1").val();
    var secondrow = $("#input2").val();
    globalchanges[id] = [firstrow,secondrow];
}

这个其他函数将检查全局对象是否具有传递的id的值，如果没有，它将使用行上的值

function getMap(id, tr){
    if(globalchanges[id] != undefined && globalchanges[id].length == 2){
        $("#input1").val(globalchanges[id][0]);
        $("#input2").val(globalchanges[id][1]);
    }
    else{
        $("#input1").val($(tr).find('td').eq(1).text());
        $("#input2").val($(tr).find('td').eq(2).text());    
    }
}

请注意，dbclick和click事件也有变化，它们应该分开

$("#table tr").dblclick(function(){
    $("#txtbox-wrapper").css({"display" : "block"});
    var id = $(this).find('td').eq(0).text();
    $('#id').val(id);
    getMap(id,this);
});
$("#savebtn").click(function(){
    var id = $('#id').val();
    setMap(id);
});

我们添加了额外的输入以将id存储在表单上。

Answer 3

您的逻辑和实施都需要进行少量更改。

1：不要在行单击中绑定保存事件。 2：您正在从td元素中选择行双击事件中的值。您需要更新此元素以保持逻辑正常工作 3：跟踪哪一行正在更新。

更新代码

 var globalchanges = {};
 var rowSelected = null;


 $("#table tr").dblclick(function() {
   $("#txtbox-wrapper").css({
     "display": "block"
   });
   rowSelected = $(this).find('td').eq(0).text();
   $("#input1").val($(this).find('td').eq(1).text());
   $("#input2").val($(this).find('td').eq(2).text());
 });

 $("#savebtn").click(function() {
   addToMap(rowSelected);
 });

 function addToMap(row) {
   var array = [];
   var changes = {};
   var firstrow = $("#input1").val();
   var secondrow = $("#input2").val();
   array.push(firstrow, secondrow);
   globalchanges[row] = array;
   makeChanges(row);
 }



 function makeChanges(row) {

   var key = Object.keys(globalchanges);

   console.log(key);

   $("#table tr td").each(function(k, v) {
     if ($(v).text() == key) {
       $(v).next().html(globalchanges[row][0]);
       $(v).next().next().html(globalchanges[row][1]);
       globalchanges = {};
     }
   });


 }

工作小提琴：https://jsfiddle.net/yudLxsgu/

更改后将覆盖表单值

3 个答案: