要使用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);
});

推荐答案

最终更新的提琴=> http://jsfiddle.net/Aq8jB/5/

Final Updated 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>

控制台错误消失了，您正确使用逻辑来编辑字段，这是控制台错误.

And Console error has gone ,You properly use logic to Edit field ,there was console error.

已更新

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

    });

这篇关于要使用jQuery实现编辑字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！