How to reverse order of table columns in html using jquery

Question

i have a html table with 10 column (i.e 1 2 3 4 5 6 7 8 9 10 ) and i want to flip columns hortizontally (i.e 10 9 8 7 6 5 4 3 2 1 ) using Jquery...

i have below code for this but this code is very long can anyone provide short code for this..

$(function() {
    jQuery.each($("table tr"), function() { 
        $(this).children(":eq(9)").after($(this).children(":eq(0)"));
        $(this).children(":eq(8)").after($(this).children(":eq(0)"));
        $(this).children(":eq(7)").after($(this).children(":eq(0)"));
        $(this).children(":eq(6)").after($(this).children(":eq(0)"));
        $(this).children(":eq(5)").after($(this).children(":eq(0)"));
        $(this).children(":eq(4)").after($(this).children(":eq(0)"));
        $(this).children(":eq(3)").after($(this).children(":eq(0)"));
        $(this).children(":eq(2)").after($(this).children(":eq(0)"));
        $(this).children(":eq(1)").after($(this).children(":eq(0)"));
    });
});

Rory McCrossan · Accepted Answer · 2018-09-25 10:55:55Z

5

To achieve this you could build an array from the td elements within each row, reverse() it, then append them back again:

$('table tr').each(function() {
  var tds = $(this).children('td').get().reverse();
  $(this).append(tds);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

answered Sep 25, 2018 at 10:55

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nouman Saeed Over a year ago

Thanks @Rory for your Quick reply but there is a problem i have another column and i want to fix this Column because this column have statement and i don't want to flip that column. html table with 11 column (i.e 1 2 3 4 5 6 7 8 9 10 Header) and i want to flip columns horizontally (i.e 10 9 8 7 6 5 4 3 2 1 Header) using Jquery... thanks in advance –

Mohammad · Accepted Answer · 2018-09-25 11:46:04Z

2

Loop through tds and in loop use .prepend() to inserting element in first of parent.

$("table td").each(function() { 
  $(this).parent().prepend(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Update:

@NoumanSaeed: html table with 11 column (i.e 1 2 3 4 5 6 7 8 9 10 Header) and i want to flip columns horizontally (i.e 10 9 8 7 6 5 4 3 2 1 Header)

In this case you should exclude last td contain header in selector using :lt().

$("table td:lt(10)").each(function() { 
    $(this).parent().prepend(this);
});

$("table td:lt(10)").each(function() { 
  $(this).parent().prepend(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>Header</td>
  </tr>
</table>

edited Sep 25, 2018 at 11:46

answered Sep 25, 2018 at 11:12

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

7 Comments

Nouman Saeed Over a year ago

@Thanks Mohammad for your Quick reply but there is a problem i have another column and i want to fix this Column because this column have statement and i don't want to flip that column. html table with 11 column (i.e 1 2 3 4 5 6 7 8 9 10 Header) and i want to flip columns horizontally (i.e 10 9 8 7 6 5 4 3 2 1 Header) using Jquery... thanks in advance

Mohammad Over a year ago

@NoumanSaeed Use $("table td:lt(10)") as selector. Check jsfiddle.net/ecuqzhd8

Nouman Saeed Over a year ago

i am very thankful to you but i observe your above code did not reverse the complete table it only reverse first row, but i want to reverse complete table

Nouman Saeed Over a year ago

i am very thankful to you but i observe your above code did not reverse the complete table it only reverse first row, but i want to reverse complete table

Nouman Saeed Over a year ago

you are right, it did not working for me..but below mention code work for me but in this code header column is not fix as you fix in above code could you please do this for me.... Thanks in advance.. code is <script> $(document).ready(function(){ $('table tr').each(function() { var tds = $(this).children('td').get().reverse(); $(this).append(tds); }); }); </script>

|

Ussaid Iqbal · Accepted Answer · 2018-09-25 11:53:23Z

0

The answers above are correct but you can also do with css.

NOTE Solution is not for table with pagination but if the data is short (one page only) you can give it a try!

if($("html").attr("dir") == "rtl") {
  $("table").css({"direction": "ltr"});
}else{
  $("table").css({"direction": "rtl"});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

edited Sep 25, 2018 at 11:53

answered Sep 25, 2018 at 11:37

Ussaid Iqbal

7961 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to reverse order of table columns in html using jquery

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related