#1
  1. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111

    Possible re-order CSS designed table rows?


    I've tables built via CSS using DIV/SPAN (TR/TD) and am wondering if it would be easy/simple to reorganize the rows of such based of the value in a column...?

    Bills (2017)

    If it is to be a bit of a hassle, I figure I'll just trigger a refresh/reload of the page, but if it was simple, I'd just let JS do it.

    The only time such would need to be done is if $cell.is(':nth-child(2)') is altered, being the due date. I figure it would be more a rare alteration, so figure the refresh/reload isn't a bad idea, but figure I'd double check if anyone had any other simple options before setting that into place.

    Thanks for any assistance.

    P.S. I know all is open access to alter, but feel free most to play around with invoice lines not holding 'Amount' values.
    Last edited by Triple_Nothing; August 3rd, 2017 at 10:52 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,110
    Rep Power
    4103
    It's that that hard in general. Gather all the rows for your table into an array, sort that array then re-append them to the table in the new order.

    Example:
    Code:
    function sortChildren($element, comparator){
        var $children = $element.children();
        Array.prototype.sort.call($children, comparator);
        $children.detach();
        $element.append($children);
    }
    On a side note, why are you re-creating tables with spans rather than just using <table>? That's what it's for.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  4. #3
  5. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,434
    Rep Power
    9645
    [edit] Eh, one minute too slow.

    Please, please, please use actual tables for actually tabular data. That's what they're for. Tables aren't your enemy.

    How about moving the row manually? When changed, grab the new sorting value and compare to siblings. You can help the process by pre-calculating sort values when rendering (and updating when it changes) so you don't have to examine each row in detail.
    Last edited by requinix; August 3rd, 2017 at 03:58 PM. Reason: pfft
  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    I usually build tables in an HTML manner, but this time it was created via CSS due to the fact that it made creating a FORM per row to edit independantly a more simple task. If I can do such easily via HTML table, that would be great, but I wasn't sure how to build each row as an independent form...
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  8. #5
  9. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    You can place the form inside a <td> (which would be the one with the class="action td").
    This would require some changes to your function.js, as in how it access the elements (e.g. td instead of span.td)
  10. #6
  11. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    That would be fine if the entire FORM was within that TD, but to be formatted in a "valid" sense, the form tag would be similar to below, which isn't valid... :/

    PHP Code:
    <TR>
      <
    FORM>
        <
    TD><INPUT /></TD>
        <
    TD><INPUT /></TD>
        <
    TD><INPUT /></TD>
        <
    TD><INPUT /></TD>
      </
    FORM>
    </
    TR
    Last edited by Triple_Nothing; August 5th, 2017 at 08:16 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  12. #7
  13. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    My idea is more like this:
    PHP Code:
    <TD class="action">  
      <
    FORM>
        <
    INPUT name="year" type="hidden" value="2017" />
        <
    INPUT name="month" type="hidden" value="08" />
        <
    INPUT name="inv_id" type="hidden" value="131" />
        <
    SPAN class="edit-icons"><IMG class="save" src="./img/save.png" /> &nbsp; <IMG class="cancel" src="./img/cancel.png" /></SPAN>
        <
    SPAN class="view-icons"><IMG class="edit" src="./img/edit.png" /> &nbsp; <IMG class="delete" src="./img/delete.png" /></SPAN>
      </
    FORM>
    </
    TD
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    I can see that being a fair layout for my 'Create New'/'Insert' line, but as far as the overall table goes, in the View mode, the table is built as below, and when switched to edit, it just takes the value of each cell and swaps the data into a checkbox/input/select for that cell in that row.

    Comment at right is in format of 'Read'/'Edit'
    PHP Code:
    <TR>
      <
    TD>(Paid)</TD// 'X' or blank/Checkbox
      
    <TD>(Due Date)</TD// 2-digit value/Input
      
    <TD>(Amount Due)</TD// $#.## or blank/Input
      
    <TD>(Account Name)</TD// 'Some Name'/Select
      
    <TD>(AdjDue)</TD// $#.## or blank/Input
      
    <TD>(Comment)</TD// (Text)/Input
    </TR
    Last edited by Triple_Nothing; August 5th, 2017 at 08:01 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  16. #9
  17. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    Originally Posted by Triple_Nothing
    I can see that being a fair layout for my 'Create New'/'Insert' line, but as far as the overall table goes, in the View mode, the table is built as below, and when switched to edit, it just takes the value of each cell and swaps the data into a checkbox/input/select for that cell in that row.

    [/PHP]
    Hm, I can see you point. When you try to edit, you need a <form> for the whole row.
    There is a new feature in HTML to allow input fields being placed outside the actual form. How much it will work or is supported in various browser is more questionable, and from what I initially can see, it will not work in IE/Edge.
    Last edited by MrFujin; August 5th, 2017 at 11:04 AM.
  18. #10
  19. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,110
    Rep Power
    4103
    If you're going to use ajax to do the submissions then it doesn't really matter. Either wrap the table in a single form tag or just don't use one. Use javascript to collect the values for a given row and submit them.

    Even if you didn't use ajax then wrapping a form around the table is generally the way to go. Either you could update everything on submit or have each row's submit button indicate which row to work on.
    Code:
    <button type="submit" name="row" value="12345">Save changes</button>
    The main issue with the later approach is if people submit via push enter in a text field, you wouldn't know which row they were in. It works best for secondary actions where they have to push the button, like delete.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  20. #11
  21. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    Originally Posted by kicken
    If you're going to use ajax to do the submissions then it doesn't really matter. Either wrap the table in a single form tag or just don't use one. ...
    If OP is willing to rewrite all the JavaScript functions, then you are correct it doesn't matter.
  22. #12
  23. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    I guess I did go with the refresh. But since it was a more rare case, I just had the AJAX script do a quick compare to see if it even changed, and upon return, add an appended action. The front end will run the appended action, if exists, otherwise just continue as previously scripted by default.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo