JSFiddle - React, Tailwind, and code Playground

by shahverdy

HTML

<table cellspacing="0" border="0" id="Table1" style="text-align:center">
    <tr>
        <th scope="col" width="80px">Column A</th>
        <th scope="col" width="80px">Column B</th>
        <th scope="col">Action</th>
    </tr>
    <tr>
        <td> <span id="GridView1_ctl02_lbl1">A</span>

        </td>
        <td> <span id="GridView1_ctl02_lbl2">0</span>

        </td>
        <td> <a href="#" class="up">Up</a>  <a href="#" class="down">Down</a>

        </td>
    </tr>
    <tr>
        <td> <span id="GridView1_ctl03_lbl1">B</span>

        </td>
        <td> <span id="GridView1_ctl03_lbl2">2</span>

        </td>
        <td> <a href="#" class="up">Up</a>  <a href="#" class="down">Down</a>

        </td>
    </tr>
    <tr>
        <td> <span id="GridView1_ctl04_lbl1">C</span>

        </td>
        <td> <span id="GridView1_ctl04_lbl2">2</span>

        </td>
        <td></td>
    </tr>
    <tr>
        <td> <span id="GridView1_ctl05_lbl1">D</span>

        </td>
        <td> <span id="GridView1_ctl05_lbl2">2</span>

        </td>
        <td></td>
    </tr>
    <tr>
        <td> <span id="GridView1_ctl06_lbl1">E</span>

        </td>
        <td> <span id="GridView1_ctl06_lbl2">3</span>

        </td>
        <td> <a href="#" class="up">Up</a>  <a href="#" class="down">Down</a>

        </td>
    </tr>
</table>

JavaScript

$(".up,.down").click(function () {
     var row = $(this).parents("tr:first");
     if ($(this).is(".up")) {
         
         myRow = row;
         prevRow = row.prev("tr");
         
         currentValue = myRow.children("td").eq(1).text();
         prevValue = prevRow.children("td").eq(1).text();
         parNode = myRow.parent();
         
         i = 0;
         family = [];
         parNode.children("tr").each(function(){
             if($(this).children("td").eq(1).text() == currentValue){
                 family[i] =  $(this);
                 i++;
             }
         });
         
         for(var j = 0; j <= i; j++ ){
             while(prevRow.children("td").eq(1).text() == prevValue){
                prevRow = prevRow.prev("tr");
             }
             family[j].insertAfter(prevRow);
         }

     } else {
         row.insertAfter(row.next());
     }
 });