Invert object inside a table

Question

My goal is to invert two position objects when selected an element in the dropdown

Example:
By default, when you open the page the component dropdown has two elements "Destination" and "Origin"

These components open a SELECT (Território) and another DROPDOWN (Pais). When I select in dropdow (first mentioned) "Destination" and "Import" the two components SELECT (territorio) and DROPDOWN (pais) you have to reverse, like, ... DROPDOWN (pais) ==Direita and SELECT (territorio)==Esquerda

<tr id="trTerritorioPais" runat="server">
    <td>
        <b>Territorialidade:</b>
    </td>
    <td>
        <select id="slctTerritorialidade" runat="server" onchange="ExibirTD(this.value)">
            <option value="RegiaoBR">Região BR</option>
            <option value="UF">UF</option>
            <option value="RegPlanMG">Região de Planejamento MG</option>
            <option value="MunicipioMG">Município MG</option>
        </select>
        <b title="Campo Obrigatório"> * </b>
    </td>
    <td>
        <b>País:</b>
    </td>
    <td>
        <asp:DropDownList Width="200px" ID="ddlPais" runat="server">
        </asp:DropDownList>
        <b title="Campo Obrigatório"> * </b>
    </td>
</tr>

It is also noteworthy that I have values (data) in the database, I need to do this without changing the database.

Answer 1

If I understand correctly you can do this with jQuery.

If you are not already using this library just reference it like this:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

An example of what the code would look like:

<script type='text/javascript'>

$(document).ready(function(){
    var htmlColunaA = $('td.a').html();
    var htmlColunaB = $('td.b').html();

    $(document).on("change", ".classeDoPrimeiroSelect", function(){
        $('td.a').html(htmlColunaB);
        $('td.b').html(htmlColunaA);
    });
});

</script>

What this code does is by choosing a value in the select of the "classeDoPrimeiroSelect" class you take the code of the two columns and then put them in inverted columns.

This code works with the following html:

<table>
    <tr>
        <select class="classeDoPrimeiroSelect">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </tr>
    <tr>
        <td class="a">Bola</td>
        <td class="b">Casa</td>
    </tr>
</table>

So you will have to adapt to your html by adding the necessary classes.

Fiddle of example of this inversion: http://jsfiddle.net/johnflaster/qEFJ6/