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

标签 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>

我有一个表，里面有静态数据，我已经完成了编辑和保存功能。基本上，代码的主要功能是当您单击第一行(假设该表有五行)时，来自它的数据将被放入其相关的输入字段中，用户可以编辑、保存、取消更改那些行值。问题是我不知道如何在单击取消时恢复输入框中的更改。我将把代码和示例场景。

示例场景，如果我单击第一行，它将填充到输入字段中(例如我将部门案例#: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");

});

最佳答案

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

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

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

所以只需为取消按钮添加事件处理程序即可。

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

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

});

关于javascript - 如何使用 jquery/javascript 恢复输入字段内值的更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58129232/

上一篇：javascript - 两个字符串之间的子字符串？

下一篇：javascript - 如何动态添加网格插件

相关文章：

javascript - task.js 生成器/ promise 与异步回调

php - mysql，通过ajax调用使用数组中的主键更新多行

jquery - 如何根据定时器改变div的内容

html - 带有 anchor 标签的粘性/固定 header - 发现其他解决方案不起作用

html - 在普通图像之前加载 CSS 背景图像？

javascript - 当此跨度值更改时，如何触发事件？

javascript - HTML5 视频 - 在特定时间开始播放视频并播放 x 时间

javascript - 显示在 Meteor 中的模板事件中所做的搜索结果

javascript - 我的幻灯片只循环播放一张照片

javascript - Javascript函数中是否需要定义参数？

©2024 IT工具网  联系我们