0

Tenho uma tabela com 3 botões, alterar e encerrar e encerrar chamado. A ideia é quando o usuario clicar no botão de encerrar(verde), oculta o botões alterar e encerrar e aparece outro botão verde "Encerrar OS". Como faço isso em jquery ou 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>

1 Resposta 1

0

pode utilizar uma função bem simples com javascript pra isso, da uma olhada neste exemplo.

<!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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .