Invert object within a table

Question

Invert object within a table

Navigation

#1 by (0 votes)

1

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

Example:
By default, when the page is opened the component dropdown has two elements "Destination" and "Source"

These components opens a SELECT (Território) and a DROPDOWN (Pais) . When I select in the dropdow (first mentioned) "Destination" and "Import" the two components SELECT (territorio) and DROPDOWN (pais) have to invert, type ... 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 should also be noted that I have values (data) in the database, I need to do this without changing the database.

asp.net

asked by anonymous 09.06.2014 / 21:41

1 answer

BroadCast notification when Android device is sleeping Mobile development with Adobe AIR

score 0 · Accepted Answer

If I understood correctly you can do this with jQuery.

If you are not yet using this library, just reference it as follows:

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

Anexampleofwhatthecodelookslike:

<scripttype='text/javascript'>$(document).ready(function(){varhtmlColunaA=$('td.a').html();varhtmlColunaB=$('td.b').html();$(document).on("change", ".classeDoPrimeiroSelect", function(){
        $('td.a').html(htmlColunaB);
        $('td.b').html(htmlColunaA);
    });
});

</script>

What this code does is when you choose a value in the select of the class "FirstPreviousSelect" you get the code from the two columns and then place 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'll have to adapt to your html by adding the necessary classes.

Example fiddle of this inversion: link