时间戳

首页 > 解决方案 > 如何使用 jquery/javascript 启用其他表行的 Onclick 事件

javascript - 如何使用 jquery/javascript 启用其他表行的 Onclick 事件

问题描述

我在 jquery 中启用 onclick 事件时遇到了困难。

这是我的 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");

  });

标签： javascriptjqueryhtml

解决方案

与其尝试禁用/启用表事件侦听器，您可以更简单地将编辑状态存储在一个变量中，并在执行编辑时应该禁用的任何操作之前对其进行检查。
我修改了你的代码来实现这个想法；编辑状态存储在isEditing变量中。所有修改都由// new code注释行突出显示。

更新

针对您的评论，我还通过引入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>

推荐阅读