如何使用 jquery/javascript 恢复输入字段内值的更改答案

【问题标题】：how to revert changes on value inside input field using jquery/javascript如何使用 jquery/javascript 恢复输入字段内值的更改
【发布时间】：2019-09-27 15:56:45
【问题描述】：

$(document).ready(function () {

    //Highlight row when selected.
    $(function () {
        $('#Cases tr').click(function () {
            $('#Cases tr').removeClass('selectedRow');
            $(this).addClass('selectedRow');
        });
    });

    //Display selected row data in text input.
    var table = document.getElementById("Cases"), rIndex;

    for (var i = 1; i < table.rows.length; i++) {
        table.rows[i].onclick = function () {
            rIndex = this.rowIndex;
            console.log(rIndex);

            document.getElementById("DepartmentCase").value = this.cells[0].innerHTML;
            document.getElementById("Department").value = this.cells[1].innerHTML;
            document.getElementById("Charge").value = this.cells[2].innerHTML;
            document.getElementById("LabCase").value = this.cells[3].innerHTML;
            document.getElementById("IncidentReportDate").value = this.cells[4].innerHTML;
        };
    } 
 

     //Disable or enable input box 
        $("#DepartmentCase").attr("disabled", true);
        $("#Department").attr("disabled", true);
        $("#Charge").attr("disabled", true);
        $("#LabCase").attr("disabled", true);
        $("#IncidentReportDate").attr("disabled", true);
        $("#Save").prop("disabled", true);
        $("#Cancel").prop("disabled", true);


    //Edit Button Function

    $("#Edit").click(function () {
        $("#DepartmentCase").prop("disabled", false);
        $("#Department").prop("disabled", false);
        $("#Charge").prop("disabled", false);
        $("#LabCase").prop("disabled", false);
        $("#IncidentReportDate").prop("disabled", false).datepicker({
            changeMonth: true,
            changeYear: true
        });
        $("#Edit").prop("disabled", true);
        $("#Save").prop("disabled", false);
        $("#Cancel").prop("disabled", false);
    });

    //Save Button Functions
    $("#Save").click(function () {
        table.rows[rIndex].cells[0].innerHTML = document.getElementById("DepartmentCase").value;
        table.rows[rIndex].cells[1].innerHTML = document.getElementById("Department").value;
        table.rows[rIndex].cells[2].innerHTML = document.getElementById("Charge").value;
        table.rows[rIndex].cells[3].innerHTML = document.getElementById("LabCase").value;
        table.rows[rIndex].cells[4].innerHTML = document.getElementById("IncidentReportDate").value;
        $("#DepartmentCase").prop("disabled", true);
        $("#Department").prop("disabled", true);
        $("#Charge").prop("disabled", true);
        $("#LabCase").prop("disabled", true);
        $("#IncidentReportDate").prop("disabled", true);
        $("#Edit").prop("disabled", false);
        $("#Save").prop("disabled", true);
        $("#Cancel").prop("disabled", true);
        $("#dialog-1").dialog("open");
      
    });

    //For dialog box
     $("#dialog-1").dialog({
        autoOpen: false,
        modal: true
    });
    
    //Cancel Button Function

    $("#Cancel").click(function () {
        $("#DepartmentCase").prop("disabled", true);
        $("#Department").prop("disabled", true);
        $("#Charge").prop("disabled", true);
        $("#LabCase").prop("disabled", true);
        $("#IncidentReportDate").prop("disabled", true);
        $("#Edit").prop("disabled", false);
        $("#Save").prop("disabled", true);
        $("#Cancel").prop("disabled", true);




    });


});

#Cases {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#Cases td, #cases th {
  border: 1px solid #ddd;
  padding: 8px;
}

#Cases tr:nth-child(even){background-color: #f2f2f2}
#Cases tr.selectedRow{background-color: #56bff0}
#Cases tr:hover {background-color: #ddd;}
#Cases tr{cursor: pointer}
#Cases th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #455382;
  color: white;
}
#container{
        margin:0 auto;
        width:80%;
        overflow:auto;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
    <script src="Scripts/jquery-1.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
<html>


<body>


<h2>
        Recent Cases
    </h2>
    <table id="Cases">
  <tr>
    <th>Department Case #</th>
    <th>Department</th>
    <th>Charge</th>
    <th>Lab Case #</th>
    <th>Incident Report Date</th>
  </tr>
  <tr>
    <td>123-12345-1234-383</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2011</td>
  </tr>
  <tr>
    <td>123-12345-1234-321</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2019</td>
  </tr>
  <tr>
    <td>123-12345-1234-456</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2012</td>
  </tr>
  <tr>
    <td>123-12345-1234-789</td>
    <td>Forti-Palmade</td>
    <td>Illegal Duping</td>
    <td>10-123456</td>
    <td>05/03/2013</td>
  </tr>
  <tr>
    <td>123-12345-1234-356</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2014</td>
  </tr>
  <tr>
    <td>123-12345-1234-297</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2015</td>
  </tr>
  <tr>
    <td>123-12345-1234-393</td>
    <td>Forti-Palmade</td>
    <td>Illegal Duping</td>
    <td>10-123456</td>
    <td>05/03/2016</td>
  </tr>
  <tr>
    <td>123-12345-1234-382</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2017</td>
  </tr>
  <tr>
    <td>123-12345-1234-023</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2018</td>
  </tr>
  <tr>
    <td>123-12345-1234-083</td>
    <td>Forti-Palmade</td>
    <td>Illegal Dumping</td>
    <td>10-123456</td>
    <td>05/03/2019</td>
  </tr>
</table>

<p><b>Case Details</b></p><br />

<table>
  <tr>
    <td>Department Case #</td>
    <td><input type="text" name="Department Case #"  id="DepartmentCase" value=""/></td>
  </tr>
  <tr>
    <td>Department</td>
    <td><input type="text" name="Department"  id="Department" value=""/></td>
  </tr>
  <tr>
    <td>Charge</td>
    <td><input type="text" name="Charge"  id="Charge" value=""/></td>
  </tr>
  <tr>
    <td>Lab Case #</td>
    <td><input type="text" name="Lab Case"  id="LabCase" value=""/></td>
  </tr>
  <tr>
    <td>Incident Report Date</td>
    <td><input type="text" name="Incident Report Date"  id="IncidentReportDate" value=""/></td>
  </tr>

</table>
<br/>


<table> 
  <tr>
    <td><input type="button" value="Edit" id="Edit" onclick=""/></td>
    <td><input type="button" value="Save" id="Save" onclick=""/></td>
    <td><input type="button" value="Cancel" id="Cancel" onclick=""/></td>
    </tr>
</table>
</body>

</html>

我有一个包含静态数据的表格，我已经完成了编辑和保存功能。基本上，代码的主要功能是当您单击第一行（假设表格有五行）时，其中的数据将被放入他们尊重的输入字段中，用户可以编辑、保存、取消更改那些行值。问题是单击取消时我不知道如何还原输入框中的更改。我将放置代码和示例场景。

示例场景，如果我点击第一行，它将填充到输入字段中（例如我将编辑部门案例#：123-12345-1234-382 到 123）并点击取消，它应该回到 123-12345 -1234-382，取消中的逻辑是它应该显示行中最后保存的值。

这是html表格

  <body>
    <h2>
    Recent Cases
   </h2>
  <table id="Cases">
  <tr>
 <th>Department Case #</th>
<th>Department</th>
<th>Charge</th>
<th>Lab Case #</th>
<th>Incident Report Date</th>
</tr>

<tr>
<td>123-12345-1234-382</td>
<td>Forti-Palmade</td>
<td>Illegal Dumping</td>
<td>10-123456</td>
<td>05/03/2017</td>
</tr>
<tr>
<td>123-12345-1234-023</td>
<td>Forti-Palmade</td>
<td>Illegal Dumping</td>
<td>10-123456</td>
<td>05/03/2018</td>
</tr>
<tr>
<td>123-12345-1234-083</td>
<td>Forti-Palmade</td>
<td>Illegal Dumping</td>
<td>10-123456</td>
<td>05/03/2019</td>
</tr>
</table>

this is the input field 

     <table>
   <tr>
   <td>Department Case #</td>
    <td><input type="text" name="Department Case #"  id="DepartmentCase" 
   value=""/></td>
   </tr>
  <tr>
   <td>Department</td>
    <td><input type="text" name="Department"  id="Department" value=""/> 
   </td>
  </tr>
   <tr>
   <td>Charge</td>
   <td><input type="text" name="Charge"  id="Charge" value=""/></td>
   </tr>
   <tr>
   <td>Lab Case #</td>
    <td><input type="text" name="Lab Case"  id="LabCase" value=""/></td>
   </tr>
    <tr>
     <td>Incident Report Date</td>
     <td><input type="text" name="Incident Report Date"  
     id="IncidentReportDate" value=""/></td>
    </tr>

  </table>
   <table> 
   <tr>
   <td><input type="button" value="Edit" id="Edit" onclick=""/></td>
   <td><input type="button" value="Save" id="Save" onclick=""/></td>
   <td><input type="button" value="Cancel" id="Cancel" onclick=""/></td>
   </tr>
  </table>
 </html>

这是 Jquery/Javascript

//Display selected row data in text input.

var table = document.getElementById("Cases"), rIndex;

for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].onclick = function () {
        rIndex = this.rowIndex;
        console.log(rIndex);

        document.getElementById("DepartmentCase").value = this.cells[0].innerHTML;
        document.getElementById("Department").value = this.cells[1].innerHTML;
        document.getElementById("Charge").value = this.cells[2].innerHTML;
        document.getElementById("LabCase").value = this.cells[3].innerHTML;
        document.getElementById("IncidentReportDate").value = this.cells[4].innerHTML;
    };
}

这是编辑和保存的JS

//Edit Button Function

$("#Edit").click(function () {
    $("#DepartmentCase").prop("disabled", false);
    $("#Department").prop("disabled", false);
    $("#Charge").prop("disabled", false);
    $("#LabCase").prop("disabled", false);
    $("#IncidentReportDate").prop("disabled", false).datepicker({
        changeMonth: true,
        changeYear: true
    });
    $("#Edit").prop("disabled", true);
    $("#Save").prop("disabled", false);
    $("#Cancel").prop("disabled", false);
});

//Save Button Functions
$("#Save").click(function () {
    table.rows[rIndex].cells[0].innerHTML = document.getElementById("DepartmentCase").value;
    table.rows[rIndex].cells[1].innerHTML = document.getElementById("Department").value;
    table.rows[rIndex].cells[2].innerHTML = document.getElementById("Charge").value;
    table.rows[rIndex].cells[3].innerHTML = document.getElementById("LabCase").value;
    table.rows[rIndex].cells[4].innerHTML = document.getElementById("IncidentReportDate").value;
    $("#DepartmentCase").prop("disabled", true);
    $("#Department").prop("disabled", true);
    $("#Charge").prop("disabled", true);
    $("#LabCase").prop("disabled", true);
    $("#IncidentReportDate").prop("disabled", true);
    $("#Edit").prop("disabled", false);
    $("#Save").prop("disabled", true);
    $("#Cancel").prop("disabled", true);
    $("#dialog-1").dialog("open");

});

【问题讨论】：

创建一个小提琴/
什么是“它”？输入字段？单元格文本？你点击保存了吗？请创建一个 sn-p 并更清楚地了解您正在做什么以及您期望发生的事情。
行单元格值将填充输入字段，然后如果您对值进行一些更改，它将恢复原状。示例：（原始：cat）（假设我添加了“ex”：catex）单击取消，输入框中的值将返回“cat”
我包含了一个 sn-p
为什么在点击保存时禁用保存和取消按钮？

标签： javascript jquery html

【解决方案1】：

好的，我明白你的意思是在你点击取消按钮时恢复你刚刚对输入字段所做的更改。

所以你要做的就是获取最后选择的行索引并重新填充行中的数据。

要重新填充该行中的数据，您只需以编程方式单击该行

所以刚刚添加了取消按钮的事件处理程序，你就完成了。

$('#Cancel').click(function(){

     if (rIndex)
        $('#Cases tr').eq(rIndex).click();

});

【讨论】：

感谢您的回答，但是如果我单击取消，是否有可能会自动重新填充输入字段/显示最后保存的值。这就像撤消文本值的更改
是的，它正在撤消/或表中上次保存的值都相同。
我的意思是还有另一种方法，不包括再次单击该行重新填充输入字段。
是的，有很多方法可以做同样的事情，但最好再次单击该行以减少重新编写代码。
点击取消后，您是否不愿意在输入字段中显示数据？？