Как я могу включить событие Onclick других строк таблицы, используя jquery / javascript - PullRequest
Новая
       1

Как я могу включить событие Onclick других строк таблицы, используя jquery / javascript

2 голосов
/ 30 сентября 2019

У меня трудности с включением события onclick в jquery.

это мой HTML, это таблица с данными в ней, когда вы щелкаете строку, она передает статическое значение в поле ввода. У меня также есть функция редактирования и сохранения. Я хочу поместить функцию внутри кнопки редактирования, где после нажатия кнопки редактирования таблица теперь будет отключена, чтобы пользователь не мог щелкнуть другой строкой внутри таблицы, у меня уже есть функция, в которой я отключаю событие onclickтак что значение внутри поля ввода не изменится, но после нажатия кнопки сохранения оно застрянет в выбранной строке, даже если вы нажмете на другую строку. Теперь я понятия не имею, как снова включить таблицу после нажатия кнопки сохранения, чтобы пользователь мог снова выбрать другие строки. если у вас есть идея кода для отключения / включения таблицы, пожалуйста, дайте мне знать. заранее спасибо. 

$(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 () {
       $('#Cases tr').removeAttr('onclick');
        $("#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>

. 

<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>
  </tr>
  </table>
 </body>

 </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").click(function () {
 $('#Cases tr').removeAttr('onclick');
 $("#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");

  });

Ответы [ 2 ]

3 голосов
/ 30 сентября 2019

Вместо того, чтобы пытаться отключить / включить прослушиватели событий таблицы, вы можете более просто сохранить состояние редактирования в переменной и проверить его перед выполнением каких-либо действий, которые должны быть отключены во время редактирования.
Я изменил ваш код для реализации этой идеи;состояние редактирования сохраняется в переменной isEditing. Все изменения выделены // new code строкой комментария.

update

В ответ на ваш комментарий я также реорганизовал код, введя метод setEditingState, который уменьшает дублирование кода. 

$(document).ready(function() {
    // new code
    var isEditing;

    //Highlight row when selected.
    $(function() {
        $('#Cases tr').click(function() {
            // new code
            if (isEditing) {
                return;
            }

            $('#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() {
            // new code
            if (isEditing) {
                return;
            }

            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;
        };
    }


    // new code
    setEditingState(false);
    // Init date picker.
    $('#IncidentReportDate').datepicker({
        changeMonth: true,
        changeYear: true
    });

    //Edit Button Function
    $('#Edit').click(function() {
        // new code
        setEditingState(true);
    });

    //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;
        $('#dialog-1').dialog('open');

        // new code
        setEditingState(false);
    });

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

    //Cancel Button Function
    $('#Cancel').click(function() {
        // new code
        setEditingState(false);
    });

    // new code
    // Adapt UI to editing state.
    function setEditingState(editing) {
        // Store value.
        isEditing = editing;
        // Disable/enable fields.
        $('#DepartmentCase').prop('disabled', !editing);
        $('#Department').prop('disabled', !editing);
        $('#Charge').prop('disabled', !editing);
        $('#LabCase').prop('disabled', !editing);
        $('#IncidentReportDate').prop('disabled', !editing);
        // Disable/enable buttons.
        $('#Edit').prop('disabled', editing);
        $('#Save').prop('disabled', !editing);
        $('#Cancel').prop('disabled', !editing);
    }
});
#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 голос
/ 30 сентября 2019

Вы можете сохранить флаговую переменную с именем edit и установить ее на false, когда вы нажимаете сохранить или отменить, и на true, когда вы редактируете: 

if (edit) {
   e.preventDefault();
   return;
}


$(document).ready(function() {
  var edit = false;
  //Highlight row when selected.
  $(function() {
    $('#Cases tr').click(function(e) {
      if (edit) {
        e.preventDefault();
        return;
      }
      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;
      $('#Cases tr').removeClass('selectedRow');
      $(this).addClass('selectedRow');
    });
  });
  var table = document.getElementById("Cases");

  //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() {
    edit = true;
    //$('#Cases tr').removeAttr('onclick');
    $("#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() {
    edit = false;
    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() {
    edit = false;
    $("#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...