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