#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    Sample: Move table rows up/down


    It took me a while to work this out, mostly because I am new to jQuery. Hopefully, it will help someone else. Comments appreciated.

    I have a form on which users can add an arbitrary number of items. These items have multiple properties, so I display the items as rows on a table. What was new for me is I needed to allow users to adjust the order of the items to their liking. So, I add "up" and "down" arrows the user can click to move the items up and down the list. The first row should not have an "up" arrow and the last row should not have a "down" arrow (since there is nowhere to go from those positions).

    The solution is actually very simple with jQuery's help, but it took me quite a few iterations to work it out.

    Note that I did not want to use the jQuery UI Sortability feature that allows dragging the items to set the order. (I don't think my users would like that.) I presume that could be layered on top of this solution if desired.

    To keep the sample simple, validation and form processing are left to the reader.

    You also need to supply your own up/down/delete icons.

    Other notes:
    • Fortunately, I don't need to keep the IDs ordered. So, when you play with it, you will see, for example, that when you move item 2 up, it stays "item 2". It is an arbitrary ID, not a row number. Keeping an ordered row number along with the items would add complexity. For my application, and I suspect most, if necessary the row number can be determined when the form is processed and ignored while the user is playing with the data.
    • I attach the "add new row" function to its button jQuery style -- after the document is ready.

      But the row-by-row up/down/del functions are attached when the row is created so that I can pass the ID to the move/delete function. I think that's the simplest solution.


    Next post will have the code.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50

    Post The code


    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
      <
    meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <
    title>jQuery Table Rows Up Down</title>
      <
    style type="text/css">
      
    form {width:25em}
      
    form table {width:100%; border:black 1px solid}
      .
    center {text-align:center}
      </
    style>
    </
    head>
    <
    body>
    <
    h1>jQuery Table Rows Up Down</h1>

    <
    p>This sample allows you to add rows to a tabledelete them, and move them up and down within the table.</p>

    <
    form method="post" action="#">
    <
    table>
    <
    thead><tr><th>ItemID</th><th>Data</th><th>Property</th><th><!-- buttons --></th></tr></thead>
    <
    tbody>
    </
    tbody>
    </
    table>
    <
    class="center"><button type="button" id="btn-add-row">Add Row</button></p>
    <
    input type="hidden" name="NumRows" id="NumRows" value="0" />
    <
    button type="submit" >Submit</button>
    </
    form>

    <
    p id="feedback-area"></p>

    <
    script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    // numrows isn't really used in this sample, but may be a handy thing to keep track of for processing. 
    var numrows=0;
    // In this sample, the rowid is basically an arbitrary row id. 
    // In an real application, it might be a product id or some other practical value.
    var newrowid=0;
    $( document ).ready(function() {
      $("#btn-add-row").click(function () {
        add_new_row();
      });
    });
    function add_new_row() {
      // When adding a row, bump the row count.
      $("#NumRows").val(++numrows);
      // And get a new rowid.
      newrowid++;
      var newrow='<tr id="rowid'+newrowid+'">'
         +'<td>'+newrowid+'</td>'
         +'<td><input id="Data'+newrowid+'" name="Data'+newrowid+'" value="" /></td>'
         +'<td>'
         +'<select>'
         +'<option></option>'
         +'<option>red</option>'
         +'<option>green</option>'
         +'<option>blue</option>'
         +'</select></td>'
         +'<td><img src="dn.png" alt="u" onclick="movedown('+newrowid+');" height="16" width="16" />'
         +' <img src="up.png" alt="d" onclick="moveup('+newrowid+');" height="16" width="16" />'
         +' <img src="del.png" alt="x" onclick="deleterow('+newrowid+');" height="16" width="16"/></td>'
         +'</tr>';
      $("form > table").append(newrow);
      reset_updown();
    }
    function moveup(id) {
      // Note: If already at the top, the item is not moved.  
      $("#rowid"+id).insertBefore($("#rowid"+id).prev());
      reset_updown();
      $("#feedback-area").text("Moved "+id+" up. ");
    }
    function movedown(id) {
      // Note: If already at the bottom, the item is not moved.
      $("#rowid"+id).insertAfter($("#rowid"+id).next());
      reset_updown();
      $("#feedback-area").text("Moved "+id+" down. ");
    }
    function deleterow(id) {
      $("#rowid"+id).remove();
      // Decrement the row count.
      $("#NumRows").val(--numrows);
      reset_updown();
      $("#feedback-area").text("Deleted "+id+".");
    }
    function reset_updown()
    {
        $('tr > td > img[src="up.png"]').css('visibility', 'visible');
        $('tr > td > img[src="up.png"]:first').css('visibility', 'hidden');
        $('tr > td > img[src="dn.png"]').css('visibility', 'visible');
        $('tr > td > img[src="dn.png"]:last').css('visibility', 'hidden');
    }
    //]]>
    </script>

    </body>
    </html> 

IMN logo majestic logo threadwatch logo seochat tools logo