6
respostas

Ajuda

Boa noite, gostaria que vcs me ajudassem com um probleminha aqui. Tenho uma lista simples e to querendo o seguinte... O usuário escolhe a linha a ser apagada por exemplo linha 3 e clicar no botão excluir e a linha precisa ser excluida. O botão de input gostaria de diminuir ele e deixar o botão de excluir do lado. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

6 respostas

Oi Clistenis, acho q vc vai ter q usar CSS para deixar o botao do lado.

$('button').on('click', function(e) {
        e.preventDefault();
        var index = $('input').val() + 1;
        $('table tr').eq(index).remove();
});

Abraços

Então...esse código eu coloco em que parte do código html? Não ta indo aqui, nõa sei se é porque estou colocando no lugar errado

<!DOCTYPE html>
<html>

<head>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="funcoes.js"></script>


    <title>Tabelas</title>


    <style>

        table, th, td{
            border: 1px solid black;
            border-collapse: collapse;
        }

    </style>

</head>

<body>

    <h1>Tabelas</h1>

    <h2>
    <div data-role="fieldcontain">
        <label for="name">digite o número da linha:</label>
        <input type="text" name="name" id="name" value=""  />
    </div>    
    </h2>

    <td><button type="button" onclick="remove(this)">Excluir</button></td>


    <table>

        <tr>
            <th>NOME</th>
            <th>SEXO</th>
            <th>IDADE</th>
        </tr>
        <tr>
            <td>Patricia</td>
            <td>F</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Marcos</td>
            <td>M</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Gabriela</td>
            <td>F</td>
            <td>40</td>
        </tr>
        <tr>
            <td>Camila</td>
            <td>F</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Rogerio</td>
            <td>M</td>
            <td>48</td>
        </tr>

    </table>


</body>

</html>

ESSE É O MEU CÓDIGO

Alguém poderia me ajudar com esse problema? Não estou conseguindo excluir a linha da tabela com o botão excluir

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="funcoes.js"></script>



<title>Tabelas</title>

<style>
    table, th, td{
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

<script>
    setTimeout(function(){
        $('#botao').click(function(){
            $("tr:eq("+ $('input').val() +")").remove()
        })
    })
</script>
<h1>Tabelas</h1>


<div data-role="fieldcontain">
    <label for="name">digite o número da linha:</label>
    <input type="text" name="name" id="name" value=""  />
</div>    


<td><button type="button" id="botao">Excluir</button></td>


<table>

    <tr>
        <th>NOME</th>
        <th>SEXO</th>
        <th>IDADE</th>
    </tr>
    <tr>
        <td>Patricia</td>
        <td>F</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Marcos</td>
        <td>M</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Gabriela</td>
        <td>F</td>
        <td>40</td>
    </tr>
    <tr>
        <td>Camila</td>
        <td>F</td>
        <td>35</td>
    </tr>
    <tr>
        <td>Rogerio</td>
        <td>M</td>
        <td>48</td>
    </tr>

</table>

Espero que seja o que pediu, usei jquery então não esqueça de adiciona-lo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software