как отменить изменения значения внутри поля ввода с помощью jquery / javascript - PullRequest
Новая
       1

как отменить изменения значения внутри поля ввода с помощью jquery / javascript

1 голос
/ 27 сентября 2019 

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

У меня есть таблица со статическими данными, я уже закончил функции редактирования и сохранения.По сути, основная функция кода заключается в том, что при нажатии на 1-ю строку (предположим, что в таблице пять строк) данные из нее будут помещены внутрь в соответствующие поля ввода, и пользователь сможет редактировать, сохранять, отменять изменения вэти значения строки.Проблема в том, что я не знаю, как отменить изменения внутри поля ввода при нажатии кнопки «Отмена».Я поставлю код и пример сценария.

Sampl Scecnario, если я щелкну по первой строке, она будет заполнена внутри поля ввода (например, я отредактирую регистр отдела №: 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");

});

1 Ответ

0 голосов
/ 27 сентября 2019

Хорошо, я понял, что вам нужно отменить только что сделанные изменения в полях ввода, когда вы нажмете отмененную кнопку.

Итак, вам нужно просто получить последний выбранный индекс строки и повторноЗаполните данные из строки.

Чтобы заново заполнить данные из строки, вам просто нужно программно щелкнуть по этой строке

Итак, просто добавили обработчик событий для отмененной кнопки, и все готово. 

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

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

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...