更改後覆蓋表格值

Question

我有一個窗體，當雙擊表格中的每一行時，它就會顯示出來。這個表單的值可以更新，表單應該在所有行更改的情況下提交。但是每次我雙擊一行並編輯該行的該表單的值時，我更改的以前的值將被覆蓋。爲了解決這個問題，我試着將所有的變化添加到地圖中，其中行ID是鍵，表單的值是值。但是這種形式仍然不會更新新的值。這裏是一個小提琴來證明我的意思：

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

如果我雙擊，說：「亞當·斯密」行，並更改名稱李四，當我雙擊第二行，然後再次點擊「Adam Smith」，它應該在第一個文本框中說「John」，在第二個文本框中說「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

首先，正如@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 2

你將需要重新考慮，因爲這部分

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

-Every時間你雙擊您要添加新的點擊綁定到savebtn元素的錶行的你的邏輯。這意味着如果您雙擊兩行，當您單擊該按鈕時，它將爲這兩個ID執行addToMap。你的邏輯可能還有其他的問題，只依賴於其他兩個輸入多行，但這個雙/三重/ +綁定會咬你。

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/