Skip to content Skip to sidebar Skip to footer

Update Function In Jquery Table

Visit: http://jsfiddle.net/Aq8jB/7/ $(document).on('click', '#edit', function(e) { var tr = $('#edit').parent(); $('#fname').html('

Solution 1:

Solved your problem USe this code

Updated Fiddle => http://jsfiddle.net/Aq8jB/11/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style>
  #content{
    position:absolute;
    left: 12px;
    top: 71px;
    width: 1079px;
    height: 58px;
    font-size: 24px;
}
#content1{
    position:absolute;
    left: 298px;
    top: 16px;
    width: 375px;
    height: 30px;
    font-size: 14px;
}

  </style>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>




</head>
<body>
<form >
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="content">
  <p>INTERN ASSIGNMENT</p>
  <div id="content1">
  <a>Features</a>
  <a> About</a>
  <a> Contact</a></div>
</div>
<p>&nbsp;</p>
<table id="table_dynamic" width="50%" align="center" border="1px">
<thead>
            <tr>
    <td>Sn</td>
                <td>Full Name</td>
                <td>Company</td>
                <td>Email</td>
                <td>Contact no</td>
                <td> Remarks</td>
                <td>Actions</td>
            </tr>
        </thead>
    </table>


            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>First Name :
              <input type="text" name="first_name" id="first_name" style="position:absolute; left: 137px; " placeholder="Full Name" /></p><br />

            <p>Company:
  <input type="text" name="Company" id="company" style="position:absolute; left: 137px; " placeholder="Company" />
            </p>  
            <br>

            <p>Email
            <input type="email" id="email" style="position:absolute; left: 139px; width: 198px; height: 26px;" placeholder='Enter your mail_id' required />
</p>  
            <br>

            <p>Contact No:
            <input type="text" id="contact_no" style="position:absolute; left: 144px; " placeholder="98765-34567" size="40" >
            </p>  
            <br>

            <p>Remarks :
  <input type="text" id="remarks" style="position:absolute; left: 149px; width: 346px; height: 79px;" >
            </p>
<p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><br>
              <input id="addButton" type="button" value="AddRow"  3w3/>              <input id="deleteButton" type="button" value="Delete" name="Delete" />
              <input id="clear" type="button" value="Clear" name="Clear" />

              <br/>
            </p>
</form>
    <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);
        $("#fname").html('<input type="text" id="txtfname" value="'+$("#fname").text()+'">');
        $("#cmpny").html('<input type="text" id="txtcmpny" value="'+$("#cmpny").text()+'">');
        $("#emailid").html('<input type="text" id="txtemailid" value="'+$("#emailid").text()+'">');
        $("#phno").html('<input type="text" id="txtphno"  value="'+$("#phno").text()+'">');
        $("#rmark").html('<input type="text" id="txtrmark" value="'+$("#rmark").text()+'">');       
$("#actions").html('<input type="button" value="'+$("#actions").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><td><input type="submit"  value="'+$("#actions").submit()+'"></td></tr>';

        //tr.replaceWith(new_row);
        $(this).attr("id","editFinal");

    });
//After final click
     $(document).on("click", "#editFinal", function(e) {
    //  alert($(this).attr("id"));                      
        var tr = $("#edit").parent();

//      alert(tr);
        $("#fname").html($("#txtfname").val());
        $("#cmpny").html($("#txtcmpny").val());
        $("#emailid").html($("#txtemailid").val());
        $("#phno").html($("#txtphno").val());
        $("#rmark").html($("#txtrmark").val());     
$("#actions").html('<input type="button" value="'+$("#actions").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><td><input type="submit"  value="'+$("#actions").submit()+'"></td></tr>';

        //tr.replaceWith(new_row);
        $(this).attr("id","edit");

    });


    $("#clear").click(function (e) {
        $("#first_name").val('');
        $("#company").val('');
        $("#email").val('');
        $("#contact_no").val('');
        $("#remarks").val('');
    });



    });
});//]]>  

    </script>
</body>
</html>

Post a Comment for "Update Function In Jquery Table"