问题保持正确的值

Question

下面我已经包含了我正在尝试构建的库存/生产数据库的一小段代码。我的实际网站上的HTML表格将从数据库表中提取。

正如你可以在jQuery中看到的，你可以点击一个正方形并且它变得可编辑。一旦编辑完毕（点击另一个td或者坐在编辑的页面上，而不需要输入2.5秒），ajax会将更改推回数据库。当我将新值推送到数据库时

我还必须推送旧值，因为数学函数已完成该值并从相同的数学函数完成新值之前从多个表中减去并添加到这些值中相同的表（简而言之，减去旧的信息，然后添加新的）。

我的问题：如果用户在快速编辑值之间单击td单元格，我目前的旧值记录方式不起作用。我希望有人能够帮助我提出更好的逻辑，以便始终拥有正确的“旧价值”。

$(document).ready(function() { 
 

 
    var old; 
 

 
    $('td').click(function() { 
 
    
 
    if ($(this).data().old === undefined) { 
 
     $(this).data({ old: $(this).text() }); 
 
    } 
 
    $(this).prop('contenteditable', true); 
 
    
 
    }); 
 

 
    var saveTimeout; 
 
    
 
    // Remove the "saved" class on keydown 
 
    $('td').on('keydown', function(e) { 
 
    $(this).removeClass("saved"); 
 
    }); 
 

 
    $('td').on('input blur', function(e) { 
 

 
    var timeoutDelay = 2500; 
 
    if (e.type == "blur") { 
 
     timeoutDelay = 1; 
 
    } 
 

 
    // If NOT already saved... 
 
    if (!$(this).hasClass("saved")) { 
 
     
 
     var _this = $(this); // preserve reference to the input field here 
 
     // Add the "saved" class to prevent other saving 
 
     _this.addClass("saved"); 
 

 
     clearTimeout(_this.data('saveTimeout')); 
 
     _this.data('saveTimeout', setTimeout(function() { 
 
     console.log("Saving " + _this.text()) + "..."; 
 
     $.ajax({ 
 
      method: "POST", 
 
      url: "updatedatabase.php", 
 
      data: { 
 
       content: _this.text(), 
 
       date: _this.siblings().first().text(), 
 
       prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(), 
 
       old: _this.data().old 
 
      } 
 
      }) 
 
      .done(function(msg) { 
 
      alert(msg); 
 
      }); 
 

 
     toastr.options = { 
 
      "positionClass": "toast-top-center", 
 
      "onclick": null, 
 
      "timeOut": "2500", 
 
     } 
 
     
 
     toastr.info(_this.data('old'),'Database Updated!<br><br>Your Previous Amount Was:'); 
 
       
 
     _this.data({}); 
 
     
 
     _this.prop('contenteditable', false); 
 

 
     }, timeoutDelay)); 
 
    } 
 
    }); 
 

 
    $("td").hover(function() { 
 

 
    $(this).addClass('highlight').siblings().first().addClass('highlight'); 
 
    $('tr:eq(1) th:eq(' + $(this).index() + ')').addClass('highlight'); 
 

 
    }, function() { 
 

 
    $(this).removeClass("highlight").siblings().first().removeClass('highlight'); 
 
    $('tr:eq(1) th:eq(' + $(this).index() + ')').removeClass('highlight'); 
 

 
    }); 
 
});

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    font-size: 90%; 
 
} 
 
th, 
 
td { 
 
    padding: 8px; 
 
} 
 
td { 
 
    text-align: center; 
 
} 
 
table { 
 
    margin: 0 auto; 
 
} 
 
td:click { 
 
    background-color: blue; 
 
} 
 
.highlight { 
 
    background-color: #E0E0E0; 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet" /> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Item #</th> 
 
    <th>1234567</th> 
 
    <th>7654321</th> 
 
    <th>5678945</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Product</th> 
 
    <th><u>22 ounce Dark</u> 
 
    </th> 
 
    <th><u>12count 4oz Dark</u> 
 
    </th> 
 
    <th><u>24count 6oz TJ</u> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td>13587</td> 
 
    <td>2203</td> 
 
    <td>4111</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td>14111</td> 
 
    <td>3247</td> 
 
    <td>4332</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td>13212</td> 
 
    <td>3101</td> 
 
    <td>3911</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td>16335</td> 
 
    <td>3299</td> 
 
    <td>4001</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td>15421</td> 
 
    <td>3100</td> 
 
    <td>4078</td> 
 
    </tr> 
 
</table>

编辑： 12/22：下面是我最新的JavaScript：

$(document).ready(function() { 

var old; 

$('td').click(function(){ 

    if ($(this).data().old === undefined) { 
     $(this).data({ old: $(this).text() }); 
    } 

    $(this).prop('contenteditable', true); 


}); 

var saveTimeout; 

// Remove the "saved" class on keydown 
$('td').on('keydown', function(e) { 
    $(this).removeClass("saved"); 
}); 

$('td').on('input blur', function(e) { 

    var timeoutDelay=2500; 

    if(e.type == "blur"){ 
     timeoutDelay=1; 
    } 

    // If NOT already saved... 
    if(!$(this).hasClass("saved")){ 
     var _this = $(this); // preserve reference to the input field here 

     // Add the "saved" class to prevent other saving 
     _this.addClass("saved"); 

     clearTimeout(_this.data('saveTimeout')); 
     _this.data('saveTimeout', setTimeout(function() { 
     console.log(_this.data().old); 
      $.ajax({ 
       method: "POST", 
       url: "tester.php", 
       data: { 
        content: _this.text(), 
        date: _this.siblings().first().text(), 
        prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(), 
        old: _this.data().old 
       } 
      }) 
      .done(function(msg) { 
       alert(msg); 
      }); 

      toastr.options = { 
       "positionClass": "toast-top-center", 
       "onclick": null, 
       "timeOut": "2500", 
      } 

      toastr.info(_this.data('old'),'Database Updated!<br><br>Your Previous Amount Was:'); 

      _this.data({}); 

      _this.prop('contenteditable', false); 

     }, timeoutDelay)); 
    } 
}); 


$("td").hover(function(){ 



    $(this).addClass('highlight').siblings().first().addClass('highlight'); 

    $('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight'); 


},function(){ 



    $(this).removeClass("highlight").siblings().first().removeClass('highlight'); 

    $('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight'); 


}); 

}）;

Answer 1

您可以使用.data()在其所属的节点上存储旧的值。其次，如果你已经有一个旧值，那么你应该确保不要覆盖旧值，并且只有在它被发送到服务器时才清除它。

所以删除老变量，改变这种：

old=$(this).text(); 

要：

if ($(this).data().old === undefined) { 
    $(this).data({ old: $(this).text() }); 
} 

和老值传递给服务器，如下所示：

$.ajax({ 
    method: "POST", 
    url: "updatedatabase.php", 
    data: { 
     content: _this.text(), 
     date: _this.siblings().first().text(), 
     prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(), 
     old: _this.data().old 
    } 
}) 

同样对于toastr：

toastr.info(_this.data('old'),'Database Updated!<br><br>Your Previous Amount Was:'); 

紧接着的是，删除数据，以表明它被发送到服务器：

_this.data().old = undefined;