Add and remove row dynamically from jquery from given content

Question

I tried follows code from refer various site but stuck on add/remove dynamic row.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<form>
Name: <input type="text" id="name" value=""></input></br>
Gender : <input type="radio" name="sex" value="male">M &nbsp;&nbsp
    <input type="radio" name="sex" value="female">F</br>

Resident: <input type="checkbox" name="resident" value="Yes">Yes &nbsp;&nbsp
      <input type="checkbox" name="resident" value="No">No
</br>
Edu : <select name="selectbox" id="selectbox">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</br>
<input type="submit" id="button" value="Submit">
</form>
<table width="400" border="1" id="empinfo" cellpadding="2" cellspacing="2">
 <tr>
    <th>Name</th>
    <th>Gender</th>
    <th>Resident</th>
    <th>Edu</th>
    <th>Action</th>
  </tr>

</table>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

    $("#button").click(function(){
       var name = $('#name').val();
       var gender = $('input:radio[name=sex]:checked').val();
       var resident= $('input:checkbox:checked').val();

    });
});         

</script>
</html>

I created one html form and posting data, I have to show submitted
information in table on same page and in action column need to show edit and delete button. if I press edit then information need to open on same page and when I submit it will affect on table. If I press delete button then rows need to remove. All this operation only by using Javascript and Jquery.

Please help me to solve this problem.

Arathi Sreekumar · Accepted Answer · 2015-06-02 08:57:43Z

Here is the modified code:

$(document).ready(function() {

    $("#button").click(function(e){
        e.preventDefault();
       var name = $('#name').val();
       var gender = $('input:radio[name=sex]:checked').val();
       var resident= $('input:checkbox:checked').val();
       var education = $("#selectbox").val();

       var content = '<td>' + name + '</td>' +
                     '<td>' + gender + '</td>' +
                     '<td>' + resident + '</td>' +
                     '<td>' + education + '</td>' +
            '<td><button class="edit-row">Edit</button><button class="delete-row">Delete</button></td>';

        if ($(this).hasClass('save-edit')) {
            $('.editing').html(content);
            $("#button").removeClass('save-edit').val('Submit');
        } else {
            var rowContent = '<tr class="employee-row">' + content + '</tr>';
            $('#empinfo').append(rowContent);
        }
    });

    $('body').on('click', '.edit-row', function (e) {
        $('.editing').removeClass('editing');
        $(this).closest('.employee-row').addClass('editing');
        $("#button").addClass('save-edit').val('Save');
    });

    $('body').on('click', '.delete-row', function (e) {
        $(this).closest('.employee-row').remove();
    });
});

and jsfiddle: https://jsfiddle.net/s6wty7vv/2/

Arathi Sreekumar · Accepted Answer · 2015-06-01 18:18:46Z

0

This is a working solution:

HTML: Same as what you have updated.

Javascript:

$(document).ready(function() {

    $("#button").click(function(e){
        e.preventDefault();
       var name = $('#name').val();
       var gender = $('input:radio[name=sex]:checked').val();
       var resident= $('input:checkbox:checked').val();
        var education = $("#selectbox").val();

        var rowContent = '<tr>' +
                            '<td>' + name + '</td>' +
                            '<td>' + gender + '</td>' +
                            '<td>' + resident + '</td>' +
                            '<td>' + education + '</td>' +
                            '<td></td>' +
                          '</tr>';
        $('#empinfo').append(rowContent);

    });
});

See the working code: https://jsfiddle.net/s6wty7vv/1/

This will however not persist unless you remove the prevent default and add a form submit and tie it up to a backend, or retain the prevent default and add an ajax call to persist this data in the backend as required.

answered Jun 1, 2015 at 18:18

Arathi Sreekumar

2,5841 gold badge19 silver badges29 bronze badges

1 Comment

Dipak Dendage Over a year ago

Thanks. Your code is working for add row but what about edit and delete row ? If you have any idea please suggest me.

Kosmas Papadatos · Accepted Answer · 2015-06-01 18:21:07Z

I think this is what you're looking for:

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<form>
  Name:
  <input type="text" id="name" value=""></input>
  </br>
  Gender :
  <input type="radio" name="sex" value="male">M &nbsp;&nbsp
  <input type="radio" name="sex" value="female">F</br>

  Resident:
  <input type="checkbox" name="resident" value="Yes">Yes &nbsp;&nbsp
  <input type="checkbox" name="resident" value="No">No
  </br>
  Edu :
  <select name="selectbox" id="selectbox">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  </br>
  <input type="submit" id="button" value="Submit">
</form>
<table width="400" border="1" id="empinfo" cellpadding="2" cellspacing="2">
  <tr>
    <th>Name</th>
    <th>Gender</th>
    <th>Resident</th>
    <th>Edu</th>
    <th>Action</th>
  </tr>

</table>

<script language="javascript" type="text/javascript">
  $(document).ready(function() {

    $("#button").click(function() {
      var name = $('#name').val();
      var gender = $('input:radio[name=sex]:checked').val();
      var resident = $('input:checkbox:checked').val();
      var edu = $('#selectbox').val();

      var rowToAdd = $('<tr>');

      rowToAdd.html('<td></td><td></td><td></td><td></td><td></td>');

      rowToAdd.find('td:nth-child(1)').html(name);
      rowToAdd.find('td:nth-child(2)').html(gender);
      rowToAdd.find('td:nth-child(3)').html(resident);
      rowToAdd.find('td:nth-child(4)').html(edu);
      $('#empinfo').append(rowToAdd);
    });
  });
</script>

</html>

Collectives™ on Stack Overflow

Add and remove row dynamically from jquery from given content

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related