0

Tenho a seguinte tabela:

<tr>
    <td>FULANO 1</td>
    <td>USUARIO 1</td>
    <td>
        <input type="text" data-id="1" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="1" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" id="atualizar" data-id="1" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" id="excluir" data-id="1" class="btn btn-danger">Excluir</a>
    </td>
</tr>

<tr>
    <td>FULANO 2</td>
    <td>USUARIO 2</td>
    <td>
        <input type="text" data-id="2" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="2" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" id="atualizar" data-id="2" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" id="excluir" data-id="2" class="btn btn-danger">Excluir</a>
    </td>
</tr>

Ela segue um padrão onde cada linha recebe atributos data-id=NUMERO DO ID

No final de cada linha tem dois botões: um pra alterar os dados e outro pra excluir o registro e cada botão tem também o atributo data-id=NUMERO DO ID.

O que eu quero é que, quando o usuário clicar no botão de alterar, saber como fazer pra pegar a informação dos campos senhaA e nivelA de acordo com o respectivo data-id=NUMERO DO ID

1

1 Resposta 1

1

Você pode fazer da seguinte forma:

$(document).ready(function(){
  $(".atualizar").on("click", function(){
    var id = $(this).data("id");
    
    var senha = $("input[id='senhaA'][data-id='"+id+"']").val();
    var nivelA = $("select[id='nivelA'][data-id='"+id+"']").val();
    
    console.log("senha: "+senha+", nivelA: "+nivelA);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>FULANO 1</td>
    <td>USUARIO 1</td>
    <td>
        <input type="text" data-id="1" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="1" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" id="atualizar" class="atualizar" data-id="1" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" id="excluir" class="excluir" data-id="1" class="btn btn-danger">Excluir</a>
    </td>
</tr>

<tr>
    <td>FULANO 2</td>
    <td>USUARIO 2</td>
    <td>
        <input type="text" data-id="2" class="form-control" id="senhaA" size="6">
    </td>
    <td>
        <select class="form-control" data-id="2" style="width:auto;" id="nivelA">
            <option value="0">Desativado</option>
            <option value="1">Digitador</option>
            <option value="2">Administrador</option>
        </select>
    </td>
    <td>
        <a href="#" class="atualizar" id="atualizar" data-id="2" class="btn btn-primary">Atualizar</a>
    </td>
    <td>
        <a href="#" class="excluir" id="excluir" data-id="2" class="btn btn-danger">Excluir</a>
    </td>
</tr>

Quando o botão é clicado (dei uma classe e selecionei pela classe, pois é melhor do que ter botões com id's repetidos), o atributo data-id do botão é guardado na variável id. Esse id então é utilizado no selector do JQuery, que busca o input com id 'senhaA' e data-id igual ao do botão. Mesma coisa para o 'nivelA'.

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 .