想要使用jquery实现编辑字段
Want to implement edit field using jquery
页面的静态
jQuery代码
$('#edit').click( function() {
var tr = $(this).parent();
var new_row = '<tr class="new_row"><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>';
tr.replaceWith(new_row);
});
最终更新的fiddle=>http://jsfiddle.net/Aq8jB/5/
:)
使用以下
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
$("#addButton").click(function (e) {
$("#table_dynamic").submit(function() {
var inputVal= $("#first_name").val();
var characterReg = /^([a-zA-Z0-9]{1,})$/;
if(!characterReg.test(inputVal)) {
$("#first_name").after('<span class="error">Maximum 8 characters.</span>');
}
});
var n=1;
var n1 = $("#first_name").val();
var n2 = $("#company").val();
var n3 = $("#email").val();
var n4 = $("#contact_no").val();
var n5 = $("#remarks").val();
if(n1!="") {
if(n2!="") {
if(n3!="") {
if(n4!="") {
if(n5!="") {
$("#table_dynamic").append('<tr><td>'+n+'</td><td id="fname">' + n1 + '</td><td id="cmpny">' + n2 + '</td><td id="emailid">'+ n3 + '</td><td id="phno">'+ n4 + '</td><td id="rmark">'+ n5 + '</td><td><input class="deleteButton" type="button" value="Delete" name="Delete"/><input id="edit" type="button" value="Edit" onClick="edit()"></td></tr>');
}
else {
alert("Remarks cannot be Empty");
}
}
else {
alert("Contact cannot be Empty");
}
}
else {
alert("Email cannot be Empty");
var atpos=n3.indexOf("@");
var dotpos=n3.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
}
else {
alert("Company cannot be Empty");
}
}
else {
alert("Name cannot be Empty");
}
});
$(document).on("click", ".deleteButton", function (e) {
var target = e.target;
$(target).closest('tr').remove();
});
$(document).on("click", "#edit", function(e) {
alert($(this).attr("id"));
var tr = $("#edit").parent();
alert(tr);
var new_row = '<tr class="new_row"><td><input type="text" value="'+$("#fname").text()+'"></td><td><input type="text" value="'+$("#cmpny").text()+'"></td><td><input type="text" value="'+$("#emailid").text()+'"></td><td><input type="text" value="'+$("#phno").text()+'"></td><td><input type="text" value="'+$("#rmark").text()+'"></td></tr>';
tr.replaceWith(new_row);
});
$("#clear").click(function (e) {
$("#first_name").val('');
$("#company").val('');
$("#email").val('');
$("#contact_no").val('');
$("#remarks").val('');
});
});
});//]]>
</script>
并且控制台错误已经消失,您正确地使用逻辑来编辑字段,出现了控制台错误。
更新
$(document).on("click", "#edit", function(e) {
// alert($(this).attr("id"));
var tr = $("#edit").parent();
// alert(tr);
$("#fname").html('<input type="text" value="'+$("#fname").text()+'">');
$("#cmpny").html('<input type="text" value="'+$("#cmpny").text()+'">');
$("#emailid").html('<input type="text" value="'+$("#emailid").text()+'">');
$("#phno").html('<input type="text" value="'+$("#phno").text()+'">');
$("#rmark").html('<input type="text" value="'+$("#rmark").text()+'">');
var new_row = '<tr class="new_row"><td><input type="text" value="'+$("#fname").text()+'"></td><td><input type="text" value="'+$("#cmpny").text()+'"></td><td><input type="text" value="'+$("#emailid").text()+'"></td><td><input type="text" value="'+$("#phno").text()+'"></td><td><input type="text" value="'+$("#rmark").text()+'"></td></tr>';
//tr.replaceWith(new_row);
});
相关文章:
- CkEditor复制/粘贴实现-从编辑器复制和从外部编辑器复制
- EXTJS 4.2 为行实现多个编辑器 xtype 编辑网格
- Google 文档如何实现富文本编辑
- 如何使用jquery在按钮单击上实现全屏编辑器
- 如何使用 Google 云端硬盘实时 API 实现协作式富文本编辑
- 如何使用 JavaScript 实现自动化登录到脚本编辑器中的消息窗口
- 如何在Angular中实现一个可取消的可编辑字段
- 如何在网页上模拟/实现所见即所得编辑器
- 在html/网页中实现编辑和审阅模式
- 如何组织HTML以实现更快、更容易的编辑
- 如何在网页中实现一个可以突出显示LaTeX和AMS关键字的编辑器
- 如何在HTML中实现富文本编辑器
- 在IE9中实现Ajax.org ACE编辑器
- 实现锁定&在编辑时解锁文档
- 如何恢复数据上的编辑表单实现的Bootstrap3模式
- 编辑此工具提示实现,使工具提示等待x秒隐藏
- 如何在编辑HTML的Javascript组件中实现视图-模型分离?
- 如何在Ace编辑器中实现拖放操作
- 在Angular中实现取消编辑
- 想要使用jquery实现编辑字段