How to get input field embedded in table using page-object accessor

Question

Given the HTML snippet below how can I, using page-object field accessors, get the second input field, the one with id="333:". I can't use the id to identify the field as it's auto-generated. Using page-object accessors I can get the embedded table and the correct cell but the cell object is a PageObject::Elements::TableCell which doesn't seem to have any methods that allow access to the embedded span and input field.

I can get the input field using native Watir accessors - i.e., browser.div( ... etc ...) but would prefer to use just page-object accessors if possible. If not possible then I'll live with native Watir. Thanks

<div class="modalContent">
    <table role="presentation" id="324:_layoutTbl" class="axial">
        <tbody>
            <tr>
                <td>
                    <input id="326:" name="" value="" onchange="juic.fire(&quot;326:&quot;,&quot;_change&quot;,event);" onfocus="juic.fire(&quot;326:&quot;,&quot;_focus&quot;,event);" onblur="juic.fire(&quot;326:&quot;,&quot;_blur&quot;,event);" type="text">
                </td>
            </tr>
            <tr>
                <td class="sfTH">
                    <label for="332:">Users:</label>
                </td>
                <td>
                    <table class="noborder" role="presentation">
                        <tbody>
                            <tr>
                                <th>
                                    <label id="336:" class="rcmFormLabel">Hiring Manager</label>
                                    <label id="337:" for="333:" class="rcmFormLabe">Users, Hiring Manager</label>
                                </th>
                                <td><span class="autocompspan ">
                                        <input class="autocompinput" id="333:" name="333:" onfocus="juic.fire(&quot;333:&quot;,&quot;_focus&quot;,event);" size="20"  value="Bill Murray" role="combobox" type="text">
                                        <input value="111111" id="333:_hidden" name="333:_hidden" type="hidden">
                                    </span>
                                    <div id="335:" style="display:none"><img alt="" class="globalFloatLeft">
                                        <div id="335:_error" style="color:#ff0000">undefined is required</div>
                                        <div style="clear:both;"></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

After more experimenting I found the answer to my question. I declared the table accessor, e.g., div(:my_table, :class => 'modalContent').table.table then in the code, to get the input field in the first row I did my_text_field = my_table_element[0].text_field_element which returned the PageObject::TextField object in column 2 of row 1