保存輸入文本中的編輯數據並刪除readOnly屬性
[英]Save edited data from the input text and remove readOnly attribute
問題描述
如何將編輯后的數據保存在同一行上？ 以及如何在單擊保存按鈕后刪除屬性readOnly。
var textBorder = "1px solid green"; $(document).ready(function() { $(".edit").click(function() { var rowparent = $(this).closest("tr"); selectElement(rowparent, ".idno"); selectElement(rowparent, ".name"); selectElement(rowparent, ".course"); $(this).val("Save"); $(rowparent).find(".idno").focus(); $(rowparent).find(".idno").select(); }); $(".editall").click(function() { var rowparent = $(".tbody").find("tr"); selectElement(rowparent, ".idno"); selectElement(rowparent, ".name"); selectElement(rowparent, ".course"); }); $(".saveAll").click(function() { //And also what should i do here? }); }); function selectElement(row, elementName) { $(row).find(elementName).removeAttr("readOnly").css("border", textBorder); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Sample jQuery Table</title> </head> <body> <table border="1" cellpadding="3"> <thead> <tr> <th>ID No.</th> <th>Name</th> <th>Course</th> <th></th> </tr> </thead> <tbody class="tbody"> <tr class="row"> <td> <input type="text" class="idno" value="001" readOnly="true" style="border:none;" /> </td> <td> <input type="text" class="name" value="Joaquin Patino" readOnly="true" style="border:none;" /> </td> <td> <input type="text" class="course" value="BSIT" readOnly="true" style="border:none;" /> </td> <td> <input type="button" class="edit" value="Edit" /> </td> </tr> <tr class="row"> <td> <input type="text" class="idno" value="002" readOnly="true" style="border:none;" /> </td> <td> <input type="text" class="name" value="Juan Dela Cruz" readOnly="true" style="border:none;" /> </td> <td> <input type="text" class="course" value="BSIT" readOnly="true" style="border:none;" /> </td> <td> <input type="button" class="edit" value="Edit" /> </td> </tr> <tr class="row"> <td> <input type="text" class="idno" value="003" readOnly="true" style="border:none;" /> </td> <td> <input type="text" class="name" value="Maria Santos" readOnly="true" style="border:none;" /> </td> <td> <input type="text" class="course" value="BSIT" readOnly="true" style="border:none;" /> </td> <td> <input type="button" class="edit" value="Edit" /> </td> </tr> </tbody> </table> <input type="button" class="editall" value="Edit All" /> <input type="button" class="saveAll" value="Save All" /> </body> </html>
1 個解決方案
解決方案1
0 已采納 2018-08-04 12:49:20
可以通過在行上切換類來簡化所有操作。 使用該類作為樣式並確定當前狀態。
使用將行和editMode布爾值作為參數的函數可簡化所有按鈕的使用。
布爾值用於使用prop()設置readOnly狀態，並在行上切換toggleClass()並設置編輯按鈕的值
當執行所有行時，布爾值由單擊哪個“全部”按鈕確定
$(document).ready(function() { $(".edit").click(function() { var $row = $(this).closest("tr"); var doEdit = !$row.hasClass('edit-mode'); toggleRowEdit($row, doEdit); }); $('.editall, .saveAll').click(function(){ var doEdit = $(this).hasClass('editall'); // loop over all rows and toggle state of each $('tbody tr').each(function(){ toggleRowEdit($(this), doEdit); }); }); }); function toggleRowEdit($row, doEdit) { $row.toggleClass('edit-mode', doEdit) $row.find('.idno, .name, .course').prop('readOnly', !doEdit); $row.find('.edit').val(doEdit ? 'Save' : 'Edit'); if (doEdit) { $row.find(".idno").focus().select(); } }
tr.edit-mode input[type=text] { border: 1px solid green }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Sample jQuery Table</title> </head> <body> <table border="1" cellpadding="3"> <thead> <tr> <th>ID No.</th> <th>Name</th> <th>Course</th> <th></th> </tr> </thead> <tbody class="tbody"> <tr class="row"> <td> <input type="text" class="idno" value="001" readOnly="true" /> </td> <td> <input type="text" class="name" value="Joaquin Patino" readOnly="true" /> </td> <td> <input type="text" class="course" value="BSIT" readOnly="true" /> </td> <td> <input type="button" class="edit" value="Edit" /> </td> </tr> <tr class="row"> <td> <input type="text" class="idno" value="002" readOnly="true" /> </td> <td> <input type="text" class="name" value="Juan Dela Cruz" readOnly="true" /> </td> <td> <input type="text" class="course" value="BSIT" readOnly="true" /> </td> <td> <input type="button" class="edit" value="Edit" /> </td> </tr> <tr class="row"> <td> <input type="text" class="idno" value="003" readOnly="true" /> </td> <td> <input type="text" class="name" value="Maria Santos" readOnly="true" /> </td> <td> <input type="text" class="course" value="BSIT" readOnly="true" /> </td> <td> <input type="button" class="edit" value="Edit" /> </td> </tr> </tbody> </table> <input type="button" class="editall" value="Edit All" /> <input type="button" class="saveAll" value="Save All" /> </body> </html>
在文本框上添加“只讀”屬性后無法在一個事件中將其刪除
[英]After Adding “readonly” attribute on text box not able to remove it in one event
在jquery中單擊按鈕時從多個字段中刪除readonly屬性
[英]remove readonly attribute from multiple fields on clicking button in jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.