使用jQuery更改表格单元格位置

Question

我想使用jQuery更改表格单元格的位置。字符串可能会有所不同。

之前

A | string
B | string
C | string
string | A
string | B
string | C
string | A
string | B
string | C

之后-我希望它以这种方式更改。

A | string
string | A
string | A
B | string
string | B
string | B
C | string
string | C
string | C

<table>
    <tr>
        <td>A | string</td>
    </tr>
    <tr>
        <td>B | string</td>
    </tr>
    <tr>
        <td>C | string</td>
    </tr>
    <tr>
        <td>string | A</td>
    </tr>
    <tr>
        <td>string | B</td>
    </tr>
    <tr>
        <td>string | C</td>
    </tr>
    <tr>
        <td>string | A</td>
    </tr>
    <tr>
        <td>string | B</td>
    </tr>
    <tr>
        <td>string | C</td>
    </tr>
</table>

我在下面提供了它的来源，但这是不切实际的，因为将来可以添加其他单元格，例如'D'，'E'等。

$("tr:contains(' | A')").insertAfter("tr:contains('A | ')");
$("tr:contains(' | B')").insertAfter("tr:contains('B | ')");
$("tr:contains(' | C')").insertAfter("tr:contains('C | ')");

Answer 1

您可以像这样动态地进行

$('table').find('tr').each(function(){
   var text = $(this).find('td').first().text(); 
   var match = (text.match(/^[A-Z] \|/))
   if(match){
      $("tr:contains(' | " + match[0][0] + "')").insertAfter("tr:contains('" + match[0]  + " ')");
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td>A | string</td>
    </tr>
    <tr>
        <td>B | string</td>
    </tr>
    <tr>
        <td>C | string</td>
    </tr>
    <tr>
        <td>string | A</td>
    </tr>
    <tr>
        <td>string | B</td>
    </tr>
    <tr>
        <td>string | C</td>
    </tr>
    <tr>
        <td>string | A</td>
    </tr>
    <tr>
        <td>string | B</td>
    </tr>
    <tr>
        <td>string | C</td>
    </tr>
</table>