javascript - 如何通过标题值移动​​表中的列

Question

我希望将“成人”列移动到表格中的最后一个位置(右侧)，但表格是交互式的，列数不固定，有时，不会有“成人”列。

请帮忙

这是表格:

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>

Answer 1

此函数将对列重新排序，以便将“成人”列放在最后(如果它出现在表格中的任何位置)。

它确实假设最多只有一列标题为“成人”(不过没有“成人”列也可以):

$(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>

编辑这是其工作原理的解释...

$(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

});