title: How to reorder table column position in jquery
body: <p>I have the following table and want to reorder the table column according to the <code>&lt;th&gt;</code> position attribute value with jquery after the page is loaded.</p>
  
  <p>I looked at the following solutions but couldn't solve my problem:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/6907333/jquery-re-ordering-table-columns">jQuery re-ordering table columns</a></li>
  <li><a href="https://stackoverflow.com/questions/6759095/re-order-table-columns">Re-order table columns?</a></li>
  <li><a href="https://stackoverflow.com/questions/5464219/change-table-columns-order">Change table columns order</a></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
      &lt;head&gt;
          &lt;tr&gt;
              &lt;th position = "3"&gt;Email&lt;/th&gt;
              &lt;th position = "1"&gt;Name&lt;/th&gt;
              &lt;th position = "2"&gt;Phone&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/head&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Ali@gmail.com&lt;/td&gt;
              &lt;td&gt;Hamid&lt;/td&gt;
              &lt;td&gt;0776567432&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The expected result:
  <a href="https://i.stack.imgur.com/lwxY2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwxY2.png" alt="enter image description here"></a></p>