ADD REMOVE TABLE ROW to another table dynamically using jquery

Question

<html>
<head>
<link rel="stylesheet" type="text/css" href="my_style.css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){
  $("#addButton").click(function(){

  var n1=$("#first_name").val();
  var n2=$("#last_name").val();

    $("#table_dynamic").append("<tr><td>"+n1+"</td>"+"<td>"+n2+"</td></tr>");

  });
  $("#updateButton").click(function(){

  });
  $("#updateButton").click(function(){

  });
}); 

</script>
<h1>My First JavaScript Application</h1>
<h2>Adding and Removing Contents Dynamically</h2>

</head>

<body>
<form>
<table align="center" border="1" id="table_static">
    <tr> 
        <td>First Name : </td>
        <td> <input type="text" name="first_name" id="first_name" /></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td> <input type="text" name="last_name" id="last_name" /></td>
    </tr>
    <tr>
        <td>
            <input id="addButton" type="button" value="AddRow"/>
            <input id="updateButton" class="hidden" type="button" value="Update" disabled/>
        </td>
        <td>
            <input id="deleteButton" type="button" value="Delete" name="Delete" disabled/>
        </td>
    </tr>
</table>
<br/>
<table id="table_dynamic" width="50%" align="center" bo`enter code here`rder="1px">
    <thead>
    <tr>
        <td> First Name</td>
        <td> Last Name</td>
    </tr>
    </thead>
</table>

</form>
</body>
</html>

I want to generate dynamic table , using the add,update ,delete button we can handle it, here I wrote code for adding row....... but i want to delete/update that row after selecting perticular row, how i will do it, plz help me.

You could use Content Editable to update each cell, as delete each row as: jsfiddle.net/hashem/HKeja — Hashem Qolami
– Hashem Qolami, Commented Feb 9, 2014 at 10:09

Vivek Sadh · Accepted Answer · 2014-02-09 09:52:37Z

1

When you append the contents to $("#table_dynamic") you can attach a class/id to the content you are adding using a div/span and using this function you can remove the element:-

$( ".classname" ).remove(); // for class
$( "#divname" ).remove(); // for div

answered Feb 9, 2014 at 9:52

Vivek Sadh

4,2683 gold badges35 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3289283 Over a year ago

but how can i get class/id of perticular selected row?

Jonathan · Accepted Answer · 2014-02-09 10:06:55Z

Made a working version for you here: Fiddle Code can be improved quite a bit, but at least you have something to start:

$(document).ready(function () {
    $("#addButton").click(function () {

        var n1 = $("#first_name").val();
        var n2 = $("#last_name").val();

        $("#table_dynamic").append('<tr><td>' + n1 + '</td><td>' + n2 + '</td><td><input class="updateButton" type="button" value="Update"/></td><td><input class="deleteButton" type="button" value="Delete" name="Delete"/></td></tr>');

    });
    $(document).on("click", ".updateButton", function (e) {
        var n1 = $("#first_name").val();
        var n2 = $("#last_name").val();

        var target = e.target;
        $(target).closest('tr').html('<td>' + n1 + '</td><td>' + n2 + '</td><td><input class="updateButton" type="button" value="Update"/></td><td><input class="deleteButton" type="button" value="Delete" name="Delete"/></td>');


    });
    $(document).on("click", ".deleteButton", function (e) {
        var target = e.target;
        $(target).closest('tr').remove();

    });
});

Collectives™ on Stack Overflow

ADD REMOVE TABLE ROW to another table dynamically using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related