What's the easiest way to exchange row HTML in table via jQuery (not drag and drop) -
what's easiest way in jquery take entire html <tr> (including tr itself, not tr innerhtml) , swap one?  i'm messing around replacewith, that's swapping innerhtml , want swap whole tr html.  seems should easy task jquery.  i'm thinking there's gotta way reference trs index , easy as: 
temp = table.children[4]; table.children[4] = table.children[7] table.children[7] = temp;   of course that's pseudocode, i'm looking easy in jquery...
nicest wrap in reuseable custom function:
$.fn.swap = function(other) {     $(this).replacewith($(other).after($(this).clone(true))); };   so can use as:
one.swap(other);   the clone(true) used events taken account.
here's sscce demonstrates swapping rows next row (if any):
<!doctype html> <html lang="en">     <head>         <title>so question 2078626 part i</title>         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>         <script type="text/javascript">             $.fn.swap = function(other) {                 $(this).replacewith($(other).after($(this).clone(true)));             };             $(document).ready(function() {                 $('tr').css('cursor', 'pointer').click(function() {                     $(this).swap($(this).next());                 });             });         </script>     </head>     <body>         <table>             <tbody>                 <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr>                 <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>                 <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>                 <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr>                 <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>             </tbody>         </table>     </body> </html>   here's sscce demonstrates how can used in particular case:
<!doctype html> <html lang="en">     <head>         <title>so question 2078626 part ii</title>         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>         <script type="text/javascript">             $.fn.swap = function(other) {                 $(this).replacewith($(other).after($(this).clone(true)));             };             $(document).ready(function() {                 $('button.swap').click(function() {                     $('#table tr:eq(1)').swap($('#table tr:eq(3)'));                 });             });         </script>     </head>     <body>         <table id="table">             <tbody>                 <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr>                 <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>                 <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>                 <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr>                 <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>             </tbody>         </table>         <button class="swap">swap rows 2 , 4</button>     </body> </html>   note element index 0 based, hence 1 , 3 in :eq().
Comments
Post a Comment