CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
once
once

Reputation: 1399

How to move a column in a table by its header value

I want the 'adult' column moved to the last position (on the right) in the table, but the table is interactive, the number of columns is not fixed, and sometimes, there will be no 'adult' column.

Please help

Here's the table:

table.tableizer-table {
		font-size: 12px;
		border: 1px solid #CCC; 
		font-family: Arial, Helvetica, sans-serif;
	} 
	.tableizer-table td {
		padding: 4px;
		margin: 3px;
		border: 1px solid #CCC;
	}
	.tableizer-table th {
		background-color: #104E8B; 
		color: #FFF;
		font-weight: bold;
	}
<table class="tableizer-table">
 <thead><tr class="tableizer-firstrow"><th></th><th>adult</th><th>embryo</th><th>lava</th><th>pupa</th></tr></thead>
 <tbody>
  <tr><td>AAEL006466-RA</td><td>ns</td><td>ns</td><td>**</td><td>ns</td></tr>
  <tr><td>AAEL006466-S2</td><td>***</td><td>ns</td><td>ns</td><td>ns</td></tr>
  <tr><td>AAEL006466-S4</td><td>***</td><td>ns</td><td>*</td><td>ns</td></tr>
 </tbody>
</table>

Upvotes: 0

Views: 361

Answers (2)

K Scandrett
K Scandrett

Reputation: 16540

This function will reorder the columns so that the 'adult' column is put last (if it is present in any position in the table).

It does presume that there is AT MOST only one column headed 'adult' (having no 'adult' column is fine though):

$(function() {

  function reorderTable() {

    var adultCol;
    var $headerCells = $(".tableizer-firstrow").children();
    
    $headerCells.each(function(idx, el) {
       var title = (el.textContent || el.innerText || "").toLowerCase();
       if (title === 'adult') adultCol = idx;       
    });
    
    if (adultCol) { // adult column is present
      $(".tableizer-table tr").each(function(idx, el) {
        $(this).append($(this).children().eq(adultCol));
      });
    }
  };

  reorderTable();
  
});
table.tableizer-table {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

.tableizer-table th {
  background-color: #104E8B;
  color: #FFF;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="tableizer-table">
  <thead>
    <tr class="tableizer-firstrow">
      <th></th>
      <th>adult</th>
      <th>embryo</th>
      <th>lava</th>
      <th>pupa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AAEL006466-RA</td>
      <td>ns</td>
      <td>ns</td>
      <td>**</td>
      <td>ns</td>
    </tr>
    <tr>
      <td>AAEL006466-S2</td>
      <td>***</td>
      <td>ns</td>
      <td>ns</td>
      <td>ns</td>
    </tr>
    <tr>
      <td>AAEL006466-S4</td>
      <td>***</td>
      <td>ns</td>
      <td>*</td>
      <td>ns</td>
    </tr>
  </tbody>
</table>

EDIT Here's an explanation of how it works...

$(function() {  // this waits for DOM to load fully before executing

  function reorderTable() {

    var adultCol; // this will be the column number that has the 'adult' header
    var $headerCells = $(".tableizer-firstrow").children(); // gets the collection of <th> cells

    $headerCells.each(function(idx, el) { // runs a function on each <th> cell

       // The following is equivalent to writing $(el).text().toLowerCase() -
       // to get the inner text so that we can compare it to our search phrase.
       // But it is more entertaining to write and will run faster than jQuery's fn.
       // It's job is to handle differences between browsers, and to ignore case for the comparison later
       var title = (el.textContent || el.innerText || "").toLowerCase(); 
       if (title === 'adult') adultCol = idx; // if we have a match, remember the column #

    });

    if (adultCol) { // run only if we found the `adult` column index (i.e. it is not null or undefined)
      $(".tableizer-table tr").each(function() { // loop over EVERY table row (so both header and body)
        // `this` is the current row, and $(this).append(...) will move an element (cell) 
        // to the last position in that row.
        // the inner part says give me the nth cell to move. 
        // The nth cell being the 'adult' column.
        $(this).append($(this).children().eq(adultCol)); 
      });
    }
  };

  reorderTable(); // execute the above function

});

Upvotes: 1

Mamun
Mamun

Reputation: 68933

Try the following code:

$(function() {
 let firstColumnHeader;
 let findPosToMove = $("table").find('tr')[0].cells.length - 2;
 jQuery.each($("table tr"), function(index, value) {
  if(index === 0){
   firstColumnHeader = ($(this).children(":eq(1)")[index].innerText);
  }
  if(firstColumnHeader == 'adult'){
   for(var i = 0; i < findPosToMove; i++){
    $(this).children(":eq(1)").before($(this).children(":eq("+(findPosToMove+1)+")"));
   }
  }
 });
});
table.tableizer-table {
  font-size: 12px;
  border: 1px solid #CCC; 
  font-family: Arial, Helvetica, sans-serif;
} 
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}
.tableizer-table th {
  background-color: #104E8B; 
  color: #FFF;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableizer-table">
  <thead><tr class="tableizer-firstrow"><th></th><th>adult</th><th>embryo</th><th>lava</th><th>pupa</th></tr></thead>
   <tbody>
    <tr><td>AAEL006466-RA</td><td>ns</td><td>ns</td><td>**</td><td>ns</td></tr>
    <tr><td>AAEL006466-S2</td><td>***</td><td>ns</td><td>ns</td><td>ns</td></tr>
    <tr><td>AAEL006466-S4</td><td>***</td><td>ns</td><td>*</td><td>ns</td></tr>
  </tbody>
</table>

Upvotes: 1

Related Questions