Jquery add and remove table row

JavaScript
21

So,

I had a think about this and found a solution for you.
Try this out:

<!DOCTYPE html>
<html>
  <head>
    <title>Test copy</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />-->
    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
    <link rel="stylesheet" href="./jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="http://www.mmeinc.com/m/css/mobile.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>-->
    <!--<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>-->
    <script src="./jquery.mobile-1.3.1.min.js"></script>
    <style type="text/css">
      .dynatable {border: solid 1px #000; border-collapse: collapse;}
      .dynatable th, .dynatable td {border: solid 1px #000; padding: 2px 10px; width: 33%; text-align: center;}
      .dynatable td {background-color:#619FCD;}
    </style>
  </head>
  <body>
  <div data-role="page" id="RateWeight">
      <form id="RateForm" method="post" action="../rtest.php">
        <table class="dynatable">
          <thead>
            <tr>
              <th>Weight (lbs)</th>
              <th>Class</th>
              <th><button class="add" data-mini="true">Add</button></th>
            </tr>
          </thead>

          <tbody>
            <tr class="ItemList">
              <td><input class="WgtArr" type="number" maxLength="5" size="9" name="WgtArr[]"></td>
              <td class='repeatable'>
                <select class="ClArr"  name="ClArr[]" id="ClArr">
                  <option value="0500" selected>50</option>
                  <option value="0550">55</option>
                  <option value="0600">60</option>
                  <option value="0650">65</option>
                  <option value="0700">70</option>
                  <option value="0775">77.5</option>
                  <option value="0850">85</option>
                  <option value="0925">92.5</option>
                  <option value="1000">100</option>
                  <option value="1100">110</option>
                  <option value="1250">125</option>
                  <option value="1500">150</option>
                  <option value="1750">175</option>
                  <option value="2000">200</option>
                  <option value="2500">250</option>
                  <option value="3000">300</option>
                  <option value="4000">400</option>
                  <option value="5000">500</option>
                </select>
              </td>
              <td><button class="remove mini" data-mini="true">Remove</button></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>

    <script type="text/javascript">
      function cloneSelect() {
        var selectmenu = $.mobile.activePage.find('select').last().clone(),
        index = $.mobile.activePage.find('select').last().index()+1,
        id = $.mobile.activePage.find('select').last().attr('id');
        $('.holder').last().append(selectmenu.attr('id',id+index));
        $('#'+id+index).selectmenu();
      }

      $("table.dynatable button.add").click(function(e){
        e.preventDefault();

        var w = $(".ItemList td").first().clone();
        var c = $("<td class='holder'></td>");
        var b = $(".ItemList td").last().clone();

        var t = $('<tr class="ItemList">').append(w).append(c).append(b);
        $("tbody").append(t);
        cloneSelect();

        $("table.dynatable button.remove").live("click", function(){
          $(this).parents("tr").remove();
        });
      });
    </script>
  </body>
</html>

Apologies for the multiple inclusions of jQuery mobile, but when I was testing this, I kept getting time out errors.

Anyway, how this works is as follows:

As I mentioned, clones of expandable items are a bit tricky in jQuery mobile.
We therefore have to clone all of the cells separately, creating a place holder for the select. We then append the cloned cells to a table row, which we then append to the table body.

After that has been done, we are then in a position to reference the last select (and only the select, not the additional HTML that jQuery mobile wraps around it), increment its id, then, referencing it by its new id, apply the .selectmenu() method to it.

Here’s a demo.

Hope that helps you.

Reference: http://stackoverflow.com/questions/9150444/jquery-clone-selectmenu-in-table

22

Ah, Excellent!
This routine is important for usability and data integrity, so it is not something I could just drop.
Unfortunately, my JavaScript is rather rudimentary and I still feel like a complete stranger when it comes to jQuery, so I can’t begin to tell you how much your help has been appreciated.

The ID thing isn’t working though. The id’s come out like ClArr2, ClArr22, ClArr222, etc. I’ve tried several things, with varying degrees of unsatisfactory results due to relying on “last().index()”, but can’t seem to figure out what to do here.
Somehow I need to get the last document.RateForm.ClArr index number or otherwise increment these id’s. The only way I’ve come up with that works is to store a number in a global and that’s well …

23

This seems to work okay.
(Also added line to clear Weight field on cloned cell)
Original Select now has an ID of “ClArr0”, while subsequent are ClArr1, etc.


    <script type="text/javascript">
      var rid = 0;
      function cloneSelect() {
         rid++;
         var selectmenu = $.mobile.activePage.find('select').last().clone();
         $('.holder').last().append(selectmenu.attr('id','ClArr'+rid));
         $('#ClArr'+rid).selectmenu();
      }

      $("table.dynatable button.add").click(function(e){
         e.preventDefault();

         var w = $(".ItemList td").first().clone();
         $(w).find(".WgtArr").attr("value","");
         var c = $("<td class='holder'></td>");
         var b = $(".ItemList td").last().clone();

         var t = $('<tr class="ItemList">').append(w).append(c).append(b);
         $("tbody").append(t);
         cloneSelect();
      });

      $("table.dynatable button.remove").live("click", function(){
         $(this).parents("tr").remove();
      });
    </script>

Then, if you want to add ID’s for the Weight field, name the original, for instance, Wgt0
then, after the cloneSelect(), add


         w.attr("class", "")
         w.find(".WgtArr").attr("id", "Wgt"+rid);
24

Excellent! That’s a good solution.
Way to go!
:slight_smile:

Are we good now?

25

Yeah - working great!
Thanks again, Pullo Dave!

26

hello folks,
what do i do to centralize the whole “dynatable” or table.

thanks

27

Hi there lawchellie,

Welcome to the forums :slight_smile:

Could you explain what you mean by “centralize”.

If you simply want to have it appear in the middle of the screen, you can do this with CSS: margin:0 auto;

28

yes, u were right of what i meant, under what tag element or id or class do i place it?

i mean having the table in the middle of the screen.

thanks

29

Just use CSS.

e.g.

.myTable{ margin:0 auto; }

<table class="myTable">
...
</table>

See here for a more thorough explination: http://designshack.net/articles/css/how-to-center-anything-with-css/

30

Hi,

It works great :slight_smile: I just have 2 inquiries:

Whenever you remove a row, the id count does not keep its order. Example: if id=2 is removed, then id=3 should become id=2 and so on. Is there a way it can be included a “auto-order” piece regarding the id field?

The one is how to disable when the rows count reaches a number. For example: i just want to allow to add 5 columns and then the “add” button go to disabled.

Thank you for your help.

Regards,

Pablo B.

31

Hi there,

Welcome to the forums :slight_smile:

To avoid misunderstandings could you please post the code with which you are currently working.

32

Hi, my bad :frowning: It is the same you have at the beginning.

Here is the link to Fiddle: http://jsfiddle.net/2Ma36/

Hope this helps :slight_smile:

Regards,

Pablo B.

33

Thanks.

Here you go: fiddle.

By way of a disclaimer, the original code isn’t mine (I seem to have taken it over) and could be tightened up a bit.
If I get chance I’ll rewrite this at some point.