How to get nested table tr field(.find) and set value using input[name]

Question

How to set the value to the nested table's field? My table show in below:

<table id="first">
    <tr>
        <td><input type="text" id="type[0]" name="type[0]"/></td>
        <td>
            <table>
            <tr class="list"><td><input type="text" id="type[0].a[0].label" name="type[0].a[0].label"/></td></tr>
            <tr class="list"><td><input type="text" id="type[0].a[1].label" name="type[0].a[1].label"/></td></tr>
            </table>
        </td>
    </tr>
<table>

I am trying to use find and input[] to set the value, but its failed to do so.

$("#first").find("table").find("tr:last").find('input[name="type['+i+'].a['+j+'].label"]').val("ABC");

But able to set the first table by using .find.

$("#first > tbody > tr:last").find('input[name="type['+i+'].a['+j+']"]').val("123");

Unable to get by using jquery find by class:

tr.list

I tried this as well, prompt undefined

alert($("#first table:last > tr.list").attr("id"));

My questions are:

How to find the nested table?
How to set the value to nested table?
How to set value to the nested table either single or in arraylist?

The reason is that you are using wrong selector. `('input[name="type['+i+'].label"]')` this should be like this `('input[name="type['+i+'].a['+i+'].label"]').` But then also `type[0].a[1].label` wont be taken — rrk, Apr 28 '16 at 17:25
Sorry..typo . I will edit my post. Btw, what selector I should use? — user1238353, Apr 28 '16 at 17:30

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

Your problem is that you need to escape the selector (take a look at this answer).

But why not just use the id?

$("#type\\[" + i + "\\]\\.a\\[" + j + "\\]\\.label")

$(document).ready(function(){
  var i = 0, j = 1;
  $("#type\\[" + i + "\\]\\.a\\[" + j + "\\]\\.label").val("custom value");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="first">
    <tr>
        <td><input type="text" id="type[0]" name="type[0]"/></td>
        <td>
            <table>
            <tr class="list"><td><input type="text" id="type[0].a[0].label" name="type[0].a[0].label"/></td></tr>
            <tr class="list"><td><input type="text" id="type[0].a[1].label" name="type[0].a[1].label"/></td></tr>
            </table>
        </td>
    </tr>
<table>

edited May 23 '17 at 12:16

Community

1
1

answered Apr 28 '16 at 17:36

jcuenod

55,835
14
65
102

I have tried. I am using jquery 1.11.3.min.js Unable to get/set the value. FYI. I am using *append* the data : $('#first').append(data); – user1238353 Apr 28 '16 at 17:45
are you hoping to get it into the `td` cell after the input or into the input itself? – jcuenod Apr 28 '16 at 18:05
I just want to set the value to the field inside nested table which is > name="type[0].a[0].label" – user1238353 Apr 28 '16 at 18:18
Thanks! Its work now. I make a mistake whereby I set the j value to 1 but table only consist of 0. I will amend my code. BTW, why need append "\\"? – user1238353 Apr 29 '16 at 03:09
For the selector you need to escape special characters (see the link in the question). To get the backslashes into the selector though, you need to escape them inside the string. So a double backslash in quotation marks gives you a string with single backslashes which tells jquery to read the square brackets and periods as regular characters (not special characters). – jcuenod Apr 29 '16 at 13:05
Okay. Thanks alot! – user1238353 Apr 30 '16 at 11:07

How to get nested table tr field(.find) and set value using input[name]

1 Answers1