保存输入文本中已编辑的数据并删除readOnly属性

如何将编辑后的数据保存在同一行？以及如何在单击保存按钮后删除属性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>

可以通过在行上切换一个类来简化这一切。将该类用于样式和确定当前状态。

使用一个以行和editMode布尔值为参数的函数可以简化所有按钮的使用。

布尔值用于使用行上的prop()和toggleClass()设置readOnly状态，并设置编辑按钮的值

当执行所有行时，布尔值由点击的"全部"按钮决定

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

相关内容

最新更新

热门标签：