Error taking the specific value of a dynamically created input within an html table

Asked

Viewed 67 times

0

I have an html similar to the html below and I need to get the value of an input that is within a sub table who is contained within one another table from the click the Insert button, I saw some posts and could not make it work and 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>
javascript jquery html
  • 1

    Missing close the tag <table id="tblPrincipal"

2 answers

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>

How about this?

Note: I changed the concept a little bit.

  • Thanks @Diegosantos is what I want, just to comment this is not the original html, because the original is very polluted and I will adapt this solution and then I give a feedback.

  • 1

    Another question what to say this passage td:eq(0 of the code ?

  • Wonderful! Working with classes you have more dynamism! Good luck!

  • @Front when you search for an element by name it returns a list so with eq(0) you access the first element of the list.

  • Forgive the delay. EQ is the index. Understand that JS creates a kind of array with the elements it found. So you specified in EQ which index of this "array" you want to understand? eq in this case is to take the first td of the "array" he found. It was clear?

1


To include a bracketed element in your selector, you must use quotes (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>
<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>

  • Hello @DVD thanks but it didn’t work perfectly, want to see ? change the data-id="@item.valor" for data-id="1" and the next line to data-id="2" and the subsequent line to data-id="3" you will see that you will always return the first line.

  • @Front Verdade! hadn’t seen the other lines of code rs... I would like to update the answer.

  • @Front But only the first button has the class .btnInsere, the others did not.

  • @Front I think the intention was that all buttons had the same class. That’s what I did in the answer and now it works.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.