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

Popular posts from this blog

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

c++ - Convert big endian to little endian when reading from a binary file -