堆栈内存溢出
  简体   繁体   English

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

[英]how to revert changes on value inside input field using jquery/javascript

 原文  2019-09-27 06:49:16  4   1    javascript/ jquery/ html

问题描述

 $(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>

I have a table with static data in it, I've already finished the edit and save functions.我有一张表格，里面有 static 数据，我已经完成了编辑和保存功能。 Basically, the main function of the code is when you clicked the 1st row(let's assume that the table has five row) the data from it will be put inside in their respected input fields and the user can edit, save, cancel changes on the those row values.基本上，代码的主要 function 是当您单击第一行（假设表格有五行）时，来自它的数据将被放入他们尊重的输入字段中，用户可以编辑、保存、取消更改那些行值。 Problem is I don't know how to revert the changes inside the input box when cancel is clicked.问题是单击取消时我不知道如何还原输入框中的更改。 I will put the code and example scenario.我将放置代码和示例场景。

Sampl scecnario, if i clicked on first row it will populate inside the input field(example i will edit department case#:123-12345-1234-382 to 123) and clicked cancel, it should be back to 123-12345-1234-382, the logic in cancel is it should display the last saved value in the row.示例场景，如果我单击第一行，它将填充到输入字段中（例如我将编辑部门案例#：123-12345-1234-382 到 123）并单击取消，它应该回到 123-12345-1234- 382，取消中的逻辑是它应该在行中显示最后保存的值。

This the html table本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>

This is the Jquery/Javascript这是 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;
    };
}

this is the JS for edit and save这是用于编辑和保存的 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");

});

1 个解决方案

解决方案1
 0 已采纳  2019-09-27 07:23:00

Okay as I get your point is to revert the change you just made on input fields as you click the canceled button.好的，我明白您的意思是在您单击取消按钮时恢复您刚刚对输入字段所做的更改。

So what you have to do is just get the last selected row index and re-populate the data from row.所以你要做的就是获取最后选择的行索引并从行中重新填充数据。

To re-populate the data from the row you just need to click that row programmatically要重新填充该行中的数据，您只需以编程方式单击该行

So just added the event handler for canceled button and you have done.因此，只需为取消按钮添加事件处理程序，您就完成了。

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

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

});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 JavaScript/jQuery 在 div 中动态添加多个输入字段？ - How to add multiple input field inside a div dynamically using JavaScript/jQuery? 如何使用jquery获取foreach循环内的输入字段的多个值？ - How to get multiple value of input field which is inside foreach loop using jquery? 如何使用javascript选择器获取表td内输入字段的值？ - How to get the value of an input field inside the table td using javascript selector? JavaScript：使用 Jquery 获取日期输入字段的值 - JavaScript: Get the value of a date input field using Jquery 如何在输入字段内使用javascript函数的返回值？ - how to use a returned value from javascript function inside input field? 我如何使用jQuery的JavaScript获取ListView项目模板内的隐藏字段值 - How can i get the hidden field value inside a listview item template using javascript of jquery 如何使用 JavaScript 在输入字段中输入值？ - How do I input the value in input field using JavaScript? 如何使用JavaScript还原模糊的背景（使用jQuery隐藏） - How to revert the vague background using javascript (hidden using jquery) 如何使用 Bootstrap 和 jQuery 在输入字段内显示错误图标？ - How to display error icon inside input field using Bootstrap and jQuery? 使用AngularJS指令，如何将输入字段上的keyup事件绑定到模型，如果模型未通过正则表达式检查，如何将其还原为先前的值？ - Using an AngularJS directive, how do I bind to keyup event on input field and revert model to previous value if it fails a regular expression check?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM