Click the button and hide two other buttons

Asked

Viewed 33 times

0

I have a table with 3 buttons, change and end and call. The idea is when the user clicks on the end button (green), hides the change and end buttons and another green "Quit OS" button appears. How do I do this in jquery or javacript?

<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OS</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style_view.css">
</head>
<body>
        <div class="row" id="list">
            <div class="table-responsive col-md-12">
                <table class="table table-bordered" style="font-size:14px;">
                    <thead>
                        <tr>
                            <th style="text-align: center;">N° OS</th>
                            <th style="text-align: center;">Data da abertura</th>
                            <th style="text-align: center;">Nome</th>
                            <th style="text-align: center;">CPF</th>
                            <th style="text-align: center;">Curso</th>
                            <th style="text-align: center;">Wifi</th>
                            <th style="text-align: center;">Email</th>
                            <th style="text-align: center;">Portal</th>
                            <th style="text-align: center;">Contato</th>
                            <th style="text-align: center;">Responsável</th>
                            <th style="text-align: center;">Ações</th>
                        </tr>
                    </thead>
                    <tbody class="listar">
                            <tr class='single_user'>
                                <td style="text-align: center;" class="td"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;"></td>
                                <td style="text-align: center;">
                                    <button  class='btn btn-warning btn-sm'><i class='fa fa-user-edit'></i></button>
                                    <button class="j_delete_action btn btn-success btn-sm" ><i class="fas fa-check"></i></button>
                                    <button class='j_delete_action_confirm btn btn-success btn-sm' style='font-size: .7rem;><i class="fas fa-check"></i>  Encerrar OS?</button>
                                </td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>

javascript jquery

1 answer

0

can use a very simple function with javascript for this, take a look at this example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="btn1" onclick="funcaoqualquer(this)">Botão1</button>
        <button id="btn2" onclick="funcaoqualquer(this)">Botão2</button>
        <button id="btn3" onclick="funcaoqualquer(this)">Botão3</button>
    </div>
    <span>
        <button id="reset" onclick="resetar()">Resetar</button>
    </span>
    <script>
        function funcaoqualquer(btn){
            switch (btn.id) {
                case "btn1":
                    document.getElementById("btn2").style.visibility = 'hidden';
                    document.getElementById("btn3").style.visibility = 'hidden';
                    break;
                case "btn2":
                    document.getElementById("btn1").style.visibility = 'hidden';
                    document.getElementById("btn3").style.visibility = 'hidden';
                    break;
                case "btn3":
                    document.getElementById("btn1").style.visibility = 'hidden';
                    document.getElementById("btn2").style.visibility = 'hidden';
                    break;
            }
        }
        function resetar(){
            document.getElementById("btn1").style.visibility = 'visible';    
            document.getElementById("btn2").style.visibility = 'visible';
            document.getElementById("btn3").style.visibility = 'visible';
        }
    </script>
</body>
</html>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.