0

Tenho uma html parecido com o html abaixo e preciso pegar o valor de um input que se encontra dentro de uma sub table que está contida dentro de uma outra table a partir do click do botão Insere, vi alguns posts e não consegui fazer funcionar e retorna erro undefind:

JQUERY

$(function () {

    $(document).on("click", ".btnInsere", function () {

        var _id = $('#divSP').find('input[name=txtValor]').data('valor');

        });  

});

HTML

<div id="divSP">
<table id="tblPrincipal">
<thead>
    <th>
        <td></td>
        <td></td>
    </th>
</thead>
<tbody>
    <tr>
        <td>
            <!--Table 1-->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Arroz"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
    </tr>
    <tr>
            <!--Table 2-->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Feijão"/> </td>
                    <td><input type="button" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
    </tr>
    <tr>
            <!--Table n... -->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Salada"/> </td>
                    <td><input type="button" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
        </td>

    </tr>
</tbody>
</table>
</div>
1
  • 1
    Faltou fechar a tag <table id="tblPrincipal"
    – Sam
    30/10/2017 às 12:10

2 Respostas 2

1

Para incluir um elemento com colchetes no seu seletor, você deve usar aspas (simples ou duplas, de acordo com o que foi usado no seletor):

Elemento alvo:

<input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Salada"/>

Errado:

var _id = $('#divSP').find('input[name=txtValor]').data('valor');

Correto:

var _id = $(this).closest('tr').find('input[name="txtValor[]"]').data('valor');

$(function () {
$(document).on("click", ".btnInsere", function () {
	var _id = $(this).closest('tr').find('input[name="txtValor[]"]').data('valor');
		alert(_id);
	});  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSP">
<table id="tblPrincipal">
<thead>
    <th>
        <td></td>
        <td></td>
    </th>
</thead>
<tbody>
    <tr>
        <td>
            <!--Table 1-->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor1" value="Arroz"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
    </tr>
    <tr>
            <!--Table 2-->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor2" value="Feijão"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
    </tr>
    <tr>
            <!--Table n... -->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor3" value="Salada"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
        </td>

    </tr>
</tbody>
</table>
</div>

4
  • Olá @DVD obrigado mas não funcionou perfeitamente, quer ver ? troque o data-id="@item.valor" para data-id="1" e o próxima linha para data-id="2" e o da linha subsequente para data-id="3" você verá que retornará sempre a primeira linha.
    – hard123
    30/10/2017 às 20:41
  • @Front Verdade! não tinha visto as outras linhas do código rs... peraí que vou atualizar a resposta.
    – Sam
    30/10/2017 às 20:46
  • @Front Mas só o 1º botão possui a classe .btnInsere, os outros não.
    – Sam
    30/10/2017 às 20:49
  • @Front Acho que a intenção era que todos os botões tivessem a mesma classe. Foi o que fiz na resposta e agora funciona.
    – Sam
    30/10/2017 às 20:56
1

$('.btnInsere').on("click", function () {
  
  var _id = $(this).parent().parent().find('td:eq(0) input').val();
  
  alert(_id)
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="divSP">
<table id="tblPrincipal"
<thead>
    <th>
        <td></td>
        <td></td>
    </th>
</thead>
<tbody>
    <tr>
        <td>
            <!--Table 1-->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Arroz"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
    </tr>
    <tr>
            <!--Table 2-->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Feijão"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
    </tr>
    <tr>
            <!--Table n... -->
            <table>
            <thead>
                <th>
                    <td> </td>
                    <td></td>
                </th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="txtValor" name="txtValor[]" id="@item.valor" data-valor="@item.valor" value="Salada"/> </td>
                    <td><input type="button" class="btnInsere" name="btnInsere" id="btnInsere" value="Insere"/></td>
                </tr>
            </tbody>
            </table>
        </td>

    </tr>
</tbody>
</table>
</div>

Que tal assim?

Obs.: Mudei um pouco o conceito.

5
  • Obrigado @DiegoSantos é isso mesmo que eu quero, só pra comentar esse não é o html original, pois o original está muito poluído e vou adaptar essa solução e depois eu dou um feedback.
    – hard123
    30/10/2017 às 12:16
  • 1
    Outra dúvida o que dizer esse trecho td:eq(0 do código ?
    – hard123
    30/10/2017 às 12:17
  • Maravilha! Trabalhando com classes você tem mais dinamicidade! Boa sorte! 30/10/2017 às 12:20
  • @Front quando você busca um elemento pelo nome ele retorna uma lista então com o eq(0) você acessa o primeiro elemento da lista. 30/10/2017 às 12:20
  • Perdão a demora. EQ é o índice. Entenda que o JS cria uma espécie de array com os elementos que ele encontou. Então você dixa especificado no EQ qual o índice deste "array" que deseja entende? O eq neste caso é para pegar a primeira td do "array" que ele encontrou. Ficou claro? 30/10/2017 às 18:33

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 .