Jquery add and remove table row

JavaScript
21

Sure. I rewrote the script a little to do what you ask:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Add/remove table row</title>
  </head>
  
  <body>
    <table class="dynamictbl" border="1">
      <thead>
        <tr>
          <th>KEY</th>
          <th>VALUE</th>
          <th><button class="add">Add</button></th>
        </tr>
      </thead>
      <tbody>
        <tr class="prototype">
          <td class="row1"><input type="text" name="key[]" value="" /></td>
          <td class="row2"><input type="text" name="value[]" value="" /></td>
          <td><button class="remove">Remove</button></td>
        </tr>
      </tbody>
    </table>
    <button id="save">Save contents</button>
    <button id="insert">Insert some content</button>
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      var $row = $("tr.prototype").clone().removeClass("prototype");;
      
      $("table.dynamictbl button.add").on("click", function() {
        $("table").append($row.clone());
      });
      
      $(document.body).on("click", "table.dynamictbl button.remove", function() {
        $(this).parents("tr").remove();
      });
      
      $("#insert").on("click", function(){
        var data = {keyvaluedata :{"url":"sampleurl","sleeptime":"3","browser":"firefox","surname":"smith"}}
        $.each(data["keyvaluedata"], function(k, v){
          var r = $row.clone();
          r.find("td.row1 > input").val(k);
          r.find("td.row2 > input").val(v);
          $("table").append(r);
        })
      });
      
      $("#save").click(function(){
        var $rows = $("table.dynamictbl > tbody > tr");
        var data = [];
        
        $rows.each(function(index){
          var r1 = $(this).find(".row1 > input[type=text]").val();
          var r2 = $(this).find(".row2 > input[type=text]").val();
          data.push([r1, r2]);
        });
        
        // Do your AJAX Magic here
        console.log(JSON.stringify(data));
      })
    </script>
  </body>
</html>
22

Hi Pullo,

I am trying to implement this into my code and will let you know once implemented. Hope will get back to you with good news. Thanks again. :slight_smile:

23

Hi pullo,

I am facing some issue with the onsert button (which will populate the values to table). when i am clicking the insert button its simply submitting the page, not populating any value into table.

concerns:
also please let me know if it is possible to call the function from another function without using “insert” button. Like in the below code i am calling “populatedatafrmdb” function. I am getting proper keyvaluedata inside the “populatedatafrmdb” function like below

{“url”:“sampleurl”,“sleeptime”:“3”,“browser”:“firefox”,“surname”:“smith”}

please see the attached code.

Note: since my code size was big, i have removed some part which is not required for this issue.

thanks

24

Hi,

It sounds to me like you have included the button within a form.
In this case you need to prevent the button’s default action.

$("button").on("click", function(e){
  e.preventDefault();
  ...
})

http://api.jquery.com/event.preventDefault/

Yes, it is. The button was just to demonstrate the functionality.

The attached code is almost two thousand lines long.
It would help if you could strip this down to a minimum, so that you demonstrate the problem you are having, but nothing more.

25

Hi pullo,

Thanks for your suggestions. I have modified the code to not to use button and it worked fine. Thanks for your help