problem getting the value inside a table looping

hi
i have a table within a form and i need to loop over the table and get the values.

i have this code:
 for(var op = 0; op < $('div.optis > table.optiontable  > tbody  > tr ').length; op ++){
      var opis = $('input.optclass')[op].val();
       alert(opis);
}

Open in new window


in firebug i get this:
TypeError: $(...)[op].val is not a function
[Break On This Error]       

var opis = $('input.optclass')[op].val();

if i remove the [op] i get only the last value.
lets say i need to get: sleeves,color,size.
i get only size.

so i guess the issue is my use of the [op]. i tried several things but not working.

what am i doing wrong?

best regards
LVL 1
derridaAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
$('input.optclass', 'div.optis > table.optiontable').each(function() {
      var opis = $(this).val();
       alert(opis);
})

Open in new window

0
 
Rainer JeschorCommented:
Hi,
could you please post a link to the page OR attach the HTML source?
For me it does not make sense to loop over table rows and then inside loop over a list of all inputs.
Thanks.
KR
Rainer
0
 
derridaAuthor Commented:
hi
this is the html:
        <div class="optis" id="option15">
            <table class="optiontable">
                <thead>
                    <tr>
                        <th>Option name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" value="sleeves" name="prod_opt15" class="optclass"></td>
                        <td><input type="text" size="5" value="0" name="prod_opt_pos15"></td>                        
                    </tr>
                </tbody>
            </table>
</div>
 <div class="optis" id="option15">
            <table class="optiontable">
                <thead>
                    <tr>
                        <th>Option name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" value="color" name="prod_opt16" class="optclass"></td>
                        <td><input type="text" size="5" value="0" name="prod_opt_pos16"></td>                        
                    </tr>
                </tbody>
            </table>
</div>
<div class="optis" id="option15">
            <table class="optiontable">
                <thead>
                    <tr>
                        <th>Option name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" value="size" name="prod_opt17" class="optclass"></td>
                        <td><input type="text" size="5" value="0" name="prod_opt_pos17"></td>                        
                    </tr>
                </tbody>
            </table>
</div>

Open in new window


they are generated programatically.

i am not sure we need the html since i do target the right element. but i do not get each value only the last: size.
0
 
derridaAuthor Commented:
perfect
0
 
derridaAuthor Commented:
if  I have the same situation only with a select tag, how would I get the values?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.