[jQuery] Re: Moving the COLUMNS of a table around

[Richard D. Worth]

Try this:

var aLeft = $(document.createElement('a')).attr('href',
'#').html('<').addClass('aLeft');
var aRight = $(document.createElement('a')).attr('href',
'#').html('>').addClass('aRight');
$('th').prepend(aLeft, ' ').append(' ', aRight);

$('.aLeft').click(function() {
   var n = 0, th = $(this).parent('th')[0];
   $(this).parents('tr:eq(0)').find('th').each(function(i) { // find 'n' of
clicked column
       n++; return ($(this)[0] != th)
   });
   $('th:nth-child(' + n + '), td:nth-child(' + n + ')').each(function() {
       $(this).insertBefore($(this).prev()); // move column to left
   });
   return false;
});

$('.aRight').click(function() {
   var n = 0, th = $(this).parent('th')[0];
   $(this).parents('tr:eq(0)').find('th').each(function(i) { // find 'n' of
clicked column
       n++; return ($(this)[0] != th)
   });
   $('th:nth-child(' + n + '), td:nth-child(' + n + ')').each(function() {
       $(this).insertAfter($(this).next()); // move column to right
   });
   return false;
});

Another option is add a unique class for each col (TH, TD) and use that
instead of nth-child.

- Richard

On 7/16/07, G[N]Urpreet Singh <[EMAIL PROTECTED]> wrote:

Hi,
I was trying to move around the columns of a table. I noticed that you can
specify styles for columns using the <col> html construct.

I tried this...

<script language="javascript">
 $(document).ready(function()
 {
    $("#switch").click(function()
            { $("#2").hide(); });
 });
</script>
<table border="1">
    <col id="1" width="20px" />
    <col id="2" width="20px" />
    <col id="3" width="20px" />
    <col id="4" width="20px" />
    <col id="5" width="20px" />
    <col id="6"  width="20px"/>
    <tbody>
        <tr>
            <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th>
        </tr>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
        </tr>
        <tr>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
        </tr>
    </tbody>
</table>


Here only "Hide" worked. Remove, insertBefore, insertAfter did not work
for obvious reasons

Any ideas on how to achieve that?? reordering the columns of a table...

Gurpreet
--
Gurpreet Singh