Error fetching the specific value of a dynamically created input inside a html table

Navigation
0

I have an html that looks like the html below and I need to get the value of an input that is inside a sub table that is contained within another > table from the click of the Insert button , I saw some posts and could not get it to work and it returns undefind error:

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>
    
asked by anonymous 30.10.2017 / 12:54

2 answers

1

To include an element with brackets in your selector, you must use quotation marks (single or double, according to what was used in the selector):

Target element: 

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

Wrong: 

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

Correct: 

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><divid="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>
    
30.10.2017 / 13:19
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><divid="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>

How about this?

Note: I changed the concept a little.

    
30.10.2017 / 13:04
Fixed menu in refresh (F5) Hiding element inside a menu