Separate Tabellenspalten in verschiedene Tabellen

Question

Ich habe eine Aufgabe, N-Spalten-Tabelle jede Spalte zu verschiedenen Tabellen zu trennen.

Meine Idee, dass:

1. Ich habe th in jeder Spalte.
2. So kann th ein Detektor der neuen Spalte sein.
3. Ich muss tr td in jeder Spalte finden.
4. Ich brauche neue Tabelle-N mit th-N value zu schaffen, in th
5. Ich brauche jeden tr td-N nach th

einfügen So nach meiner Idee, ich habe folgenden Code geschrieben:

jQuery(document).ready(function($) { 
 
    function tableshoot() { 
 

 
     $("table th").each(function() { 
 
      var $this = $(this); 
 
      var thistext = $this.html(); 
 
      var index = $this.index(); 
 

 
      var tdList = $this.closest("table").find("tr").find("td:eq(" + index + ")").html(); 
 

 
      $this.closest("table").append('<table class="mob-table-' + index + '"><tbody><tr><th>' + thistext + '</th></tr></tbody></table>'); 
 

 
      $this.closest("table").find("tr").find("td:eq(" + index + ")").each(function() { 
 
       var tdcontent = $(this).html(); 
 
       $('table.mob-table-' + index + ' tbody').append('<tr><td>' + tdcontent + '</td></tr>'); 
 
      }); 
 
     }); 
 

 
    }; 
 
    tableshoot(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <th> 
 
     COL 1 
 
     </th> 
 
     <th> 
 
     COL 2 
 
     </th> 
 
     <th> 
 
     COL 3 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <td>VAL 1</td> 
 
     <td>VAL 2</td> 
 
     <td>VAL 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>VAL 11</td> 
 
     <td>VAL 22</td> 
 
     <td>VAL 33</td> 
 
    </tr> 
 
    <tr> 
 
     <td>VAL 111</td> 
 
     <td>VAL 222</td> 
 
     <td>VAL 333</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Meine Frage ist:

Ist es richtig? Oder gibt es mehr saubere Möglichkeiten, es zu tun?

Egal, mein Code ist praktikabel. Hoffe das hilft jemandem.

Answer 1

paar kleine Dinge:

1. "finden (" tr "). Finden (" td: eq (... "zu "finden (tr td: eq ..."
2. " $ ("Tabelle th"). each (function()“auf "$ (" Tabelle th "). each (function (Index-Wert)", für sauberen Zugriff auf Index und Wert.

jQuery doc each