How To Switch Between Table Values

Question

How To Switch Between Table Values

Navigation

#1 by (2 votes)

1

Code

<table border="1px" width="33%">

 <th bgcolor="silver">Trocar de Posição</th>

 <tr>

  <td id="cel_01">Texto 1</td>

 </tr>

 <tr>

  <td id="cel_02">Texto 2</td>

 </tr>

</table>

Example

Before

Text 1

Text 2

Then

Text2

Text1

When you click the Switch button, Switch Line Text 1 to Text 2 and vice versa .

javascript table

asked by anonymous 25.07.2016 / 08:49

1 answer

Compile error with struct How do I get only my domain links to open my application?

score 2 · Accepted Answer

This does what you want:

Using JQuery

            $("button").click(function(){
                var text_01 = $("#cell-01").html();
                var text_02 = $("#cell-02").html();

                $("#cell-01").html(text_02);
                $("#cell-02").html(text_01);
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><tableborder="1px">
            <tbody>
                <tr>
                    <td id="cell-01">A Text 1</td>
                </tr>
                <tr>
                    <td id="cell-02">B Text 2</td>
                </tr>
            </tbody>
        </table>
        <br>
        <button>Change</button>

Pure JavaScript

            function changeHTML(){
                var text_01 = document.getElementById('cell-01').innerHTML;
                var text_02 = document.getElementById('cell-02').innerHTML;


                document.getElementById('cell-01').innerHTML = text_02;
                document.getElementById('cell-02').innerHTML = text_01;
            };

        <table border="1px">
            <tbody>
                <tr>
                    <td id="cell-01">A Text 1</td>
                </tr>
                <tr>
                    <td id="cell-02">B Text 2</td>
                </tr>
            </tbody>
        </table>
        <br>
        <button onclick="changeHTML()">Change</button>