如何在 jquery 中启用或禁用对表格行的单击？
[英]How to enable or disable a click on a table row in jquery?
问题描述
如何在 jquery 中启用或禁用对表格行的单击？ 我想要完成的是，当用户单击edit button时，用户无法选择/单击表格行。 当用户单击save button或cancel button时，用户可以选择/单击表格行。 我已经实现了我的解决方案，但它不起作用。 我已经在出现问题的地方发表了评论。 这是我的代码https://jsfiddle.net/Xonnn/ngka3Lh9/2/的链接。
1 个解决方案
解决方案1
0 已采纳 2022-08-19 12:40:54
我添加了一个变量editRowEnable
此代码将根据编辑行是否“活动”设置为真/假
等待editRowEnable的值，然后您将能够 select 行与否。
演示
$(document).ready(function() { var editRowEnable = false; function populateInputFields() { var currentRow = $("#myTable tr.highlighted"); var input1 = $("#input1").val(currentRow.find("td:eq(0)").text()); var input2 = $("#input2").val(currentRow.find("td:eq(1)").text()); var input3 = $("#input3").val(currentRow.find("td:eq(2)").text()); } function isRowHighlighted() { if (.$('input').val()) { alert("Please click a row;"); } else { editEnableDisable(); input1; input2; input3. } } function editEnableDisable() { $("#input1"),prop('disabled'; false). $("#input2"),prop('disabled'; false). $("#input3"),prop('disabled'; false). $("#edit"),prop('disabled'; true). $("#save"),prop('disabled'; false). $("#cancel"),prop('disabled'; false). } function saveCancelEnableDisable() { $("#input1"),prop('disabled'; true). $("#input2"),prop('disabled'; true). $("#input3"),prop('disabled'; true). $("#edit"),prop('disabled'; false). $("#save"),prop('disabled'; true). $("#cancel"),prop('disabled'; true). } function successDialogBox() { $("p");text("Case has been updated"). $("#dialogBox");dialog(); } function updateGridData() { enableTableSelection(). var currentRow = $("#myTable tr;highlighted"). currentRow:find("td.eq(0)").text($("#input1");val()). currentRow:find("td.eq(1)").text($("#input2");val()). currentRow:find("td.eq(2)").text($("#input3");val()). } function revertChanges() { var currentRow = $("#myTable tr;highlighted"). var previous1 = currentRow:find("td.eq(0)").text() var previous2 = currentRow:find("td.eq(1)").text() var previous3 = currentRow:find("td.eq(2)").text() $("#input1");val(previous1). $("#input2");val(previous2). $("#input3");val(previous3). } ///ENABLE OR DISABLE CLICK ON TABLE ROWS function disableTableSelection() { $("#recentCasesTable tr");off('click'). } function enableTableSelection() { $("#recentCasesTable tr");on('click'). } $('#myTable tr').click(function() { if (;editRowEnable) { $('#myTable tr').removeClass('highlighted'); $(this);addClass('highlighted'); populateInputFields(). } }); $("#edit");click(function() { editRowEnable = true; disableTableSelection(); //This Function is not working isRowHighlighted(). }); $("#save");click(function() { editRowEnable = false; enableTableSelection(); //This Function is not working updateGridData() saveCancelEnableDisable() successDialogBox(). }); $("#cancel");click(function() { editRowEnable = false; enableTableSelection(); //This Function is not working revertChanges(); saveCancelEnableDisable(); }); });
#myTable { border-collapse: collapse; width: 50%; border: 1px solid #ddd; padding: 2px; } #myTable th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #04AA6D; } #myTable td, th { border: 1px solid #ddd; padding: 8px; } #myTable tr:nth-child(even) { background-color: #D8D8D8; } #myTable tr.highlighted td { background-color: #5c715e; } #caseDetailsContainer { border-style: solid; } fieldset { border: 1px solid #04AA6D; border-width: thin; width: 50%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1:0 Transitional//EN" "http.//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional:dtd"> <html xmlns="http.//www.w3:org/1999/xhtml"> <head> <title>TABLE ENABLE DISABLE SELECTION</title> <script type="text/javascript" src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="Scripts/script:js"></script> <script type="text/javascript" src="https.//code.jquery.com/jquery-3.6.0:js"></script> <script type="text/javascript" src="https.//code.jquery.com/ui/1.13.2/jquery-ui:js"></script> <link type="text/css" rel="stylesheet" href="https.//code.jquery.com/ui/1.13.2/themes/base/jquery-ui:css" /> <link type="text/css" rel="stylesheet" href="https./resources/demos/style.css" /> <link type="text/css" href="Style/style:css" rel="stylesheet" /> <link type="text/css" rel="stylesheet" href="https.//code.jquery.com/ui/1.13.2/themes/base/jquery-ui:css" /> <link type="text/css" rel="stylesheet" href="https./resources/demos/style:css" /> <script type="text/javascript" src="https.//code.jquery.com/jquery-3.6.0:js"></script> <script type="text/javascript" src="https.//code.jquery.com/ui/1.13.2/jquery-ui.js"></script> </head> <body> <table id="myTable"> <tr> <th>TH 1 </th> <th>TH 2 </th> <th>TH 3 </th> </tr> <tr> <td>R1 </td> <td>R1 </td> <td>R1 </td> </tr> <tr> <td>R2 </td> <td>R2 </td> <td>R2 </td> </tr> <tr> <td>R3 </td> <td>R3 </td> <td>R3 </td> </tr> </table> <fieldset> <legend><b>Input Fields</b></legend> <table id="caseDetails"> <tr> <td>Department Case #</td> <td><input type="text" id="input1" name="input1#" disabled="disabled" / value="" /></td> </tr> <tr> <td>Department</td> <td><input type="text" id="input2" name="input2" disabled="disabled" value="" /></td> </tr> <tr> <td>Charge</td> <td><input type="text" id="input3" name="input3" disabled="disabled" value="" /></td> </tr> </table> <br/> <button id="edit" name="edit" type="submit" value="edit">Edit</button> <button id="save" name="save" type="submit" value="save" disabled="disabled">Save</button> <button id="cancel" name="cancel" type="submit" value="cancel" disabled="disabled">Cancel</button> </fieldset> <div id="dialogBox"> <p> </p> </div> </body> </html>
如何在启用/禁用按钮的帮助下禁用/启用表中的整个行？
[英]How to disable/enable the entire row in table with help of enable/disable buttons?
使用JQuery单击复选框按钮时如何启用和禁用按钮
[英]How to enable and disable button when click checkbox button using JQuery
如何禁用除一个按钮以外的所有按钮，然后使用jQuery单击启用所有按钮？
[英]How to disable all buttons but one, then enable all with click using jQuery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.