Set focus on specific cell of last row of a table when text box value changes

Question

What I wanted to do !!

I have a one text-box on page, on page load focus will be set into text-box i will scan one item and it's digits will be inserted into text-box.Based on values it will add one row in html table.At the same time i wanted set focus on "CODE" cell text-box.

So every time I scan something it will insert a row into below table and every time i wanted to set focus on cell of CODE column of last row.Here in code column we will scan the value and it will be displayed on the same cell.

Further more if possible I wanted to set focus back to the text-box after scanning value in code cell value.So basically its back and forth scanning process.

 <input type="text" name=" " value=" "> <br> <div class="t-Report-tableWrap"> <table class="t-Report-report" summary="Text Test"> <thead> <tr> <th class="t-Report-colHead" align="center" id="DERIVED$01" >&nbsp;</th> <th class="t-Report-colHead" align="center" id="C003" >Id</th> <th class="t-Report-colHead" align="center" id="C001" >Name</th> <th class="t-Report-colHead" align="center" id="C002" >Code</th> <th class="t-Report-colHead" align="center" id="C007" >Text</th> </tr> </thead> <tbody> <tr id="init_row_invoice" style="display:none;" > <td class="t-Report-cell" headers="DERIVED$01"> <a href ="javascript:void();" class="fa fa-trash-o"></a> </td> <td class="t-Report-cell" headers="C003">(null)</td> <td class="t-Report-cell" headers="C001">(null)</td> <td class="t-Report-cell" headers="C002"> <label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text" id="f02_0000" /> </td> <td class="t-Report-cell" headers="C007"> <label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text" id="f03_0000" /> <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden" id="f01_0000" /> <input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden" id="f04_0000" /> <input type="hidden" id="fcs_0000" name="fcs" value=""> <input type="hidden" id="fcud_0000" name="fcud" value="D" /> </td> </tr> <tr> <td class="t-Report-cell" headers="DERIVED$01"> <a href ="javascript:void(1);" class="fa fa-trash-o"></a> </td> <td class="t-Report-cell" headers="C003">90001</td> <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td> <td class="t-Report-cell" headers="C002"> <label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text" id="f02_0001" /> </td> <td class="t-Report-cell" headers="C007"> <label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text" id="f03_0001" /> <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden" id="f01_0001" /> <input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden" id="f04_0001" /> <input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"> <input type="hidden" id="fcud_0001" name="fcud" value="U" /> </td> </tr> </tbody> </table> </div> <div class="t-Report-links"></div> <table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"> <tr> <td colspan="9" align="right" > <table role="presentation" > <tr> <td class="pagination"></td> <td class="pagination"></td> <td nowrap="nowrap" class="pagination"> <span class="t-Report-paginationText">1 - 3</span> </td> <td class="pagination"></td> <td class="pagination"></td> </tr> </table> </td> </tr> </table> </div> 

To be more clear.

Scan value from a sticker it will insert value into text-box and it will add a rwo into table now same time it will set focus to cell column CODE of last row of here again we will scan value from sticker and after scanning it should set focus back to the textbox.

Answer 1

Here you go with a solution

 $('table.t-Report-report') .find('tr') .last() .find('input[type="text"]') .first() .focus(); $('input').first().focus(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name=" " value=" "><br> <div class="t-Report-tableWrap"> <table class="t-Report-report" summary="Text Test"> <thead> <tr> <th class="t-Report-colHead" align="center" id="DERIVED$01" >&nbsp;</th> <th class="t-Report-colHead" align="center" id="C003" >Id</th> <th class="t-Report-colHead" align="center" id="C001" >Name</th> <th class="t-Report-colHead" align="center" id="C002" >Code</th> <th class="t-Report-colHead" align="center" id="C007" >Text</th> </tr> </thead> <tbody> <tr id="init_row_invoice" style="display:none;" > <td class="t-Report-cell" headers="DERIVED$01"><a href ="javascript:void();" class="fa fa-trash-o"></a></td><td class="t-Report-cell" headers="C003">(null)</td> <td class="t-Report-cell" headers="C001">(null)</td> <td class="t-Report-cell" headers="C002"><label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f02_0000" /></td> <td class="t-Report-cell" headers="C007"><label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f03_0000" /><input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0000" /><input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden " id="f04_0000" /><input type="hidden" id="fcs_0000" name="fcs" value=""><input type="hidden" id="fcud_0000" name="fcud" value="D" /> </td> </tr> <tr> <td class="t-Report-cell" headers="DERIVED$01"><a href ="javascript:void(1);" class="fa fa-trash-o"></a></td> <td class="t-Report-cell" headers="C003">90001</td> <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td> <td class="t-Report-cell" headers="C002"><label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text " id="f02_0001" /></td> <td class="t-Report-cell" headers="C007"> <label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text " id="f03_0001" /> <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0001" /><input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden " id="f04_0001" /><input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"><input type="hidden" id="fcud_0001" name="fcud" value="U" /> </td> </tr> </tbody> </table> </div> <div class="t-Report-links"></div> <table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"><tr><td colspan="9" align="right" ><table role="presentation" ><tr><td class="pagination"></td><td class="pagination"></td><td nowrap="nowrap" class="pagination"><span class="t-Report-paginationText">1 - 3</span></td><td class="pagination"></td><td class="pagination"></td></tr></table></td></tr></table> </div> 

Hope this will help you.

Answer 2

With Length > 0

 $(document).on('click', '#btn_process', function() { var tr = $('#init_row_invoice').clone(true); $('table.t-Report-report tbody').append(tr.show()); $(tr).find('input[type=text][name=f03]').val('123'); if ($(tr).find('input[type=text][name=f03]').val().length > 0) { $(tr).find('input[type=text][name=f02]').focus(); } else {} }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name=" " value=" "><input id="btn_process" type="submit" value="process" /?<br> <div class="t-Report-tableWrap"> <table class="t-Report-report" summary="Text Test"> <thead> <tr> <th class="t-Report-colHead" align="center" id="DERIVED$01">&nbsp;</th> <th class="t-Report-colHead" align="center" id="C003">Id</th> <th class="t-Report-colHead" align="center" id="C001">Name</th> <th class="t-Report-colHead" align="center" id="C002">Code</th> <th class="t-Report-colHead" align="center" id="C007">Text</th> </tr> </thead> <tbody> <tr id="init_row_invoice" style="display:none;"> <td class="t-Report-cell" headers="DERIVED$01"> <a href="javascript:void();" class="fa fa-trash-o"></a> </td> <td class="t-Report-cell" headers="C003">(null)</td> <td class="t-Report-cell" headers="C001">(null)</td> <td class="t-Report-cell" headers="C002"><label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f02_0000" /></td> <td class="t-Report-cell" headers="C007"> <label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f03_0000" /> <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0000" /> <input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden " id="f04_0000" /> <input type="hidden" id="fcs_0000" name="fcs" value=""><input type="hidden" id="fcud_0000" name="fcud" value="D" /> </td> </tr> <tr> <td class="t-Report-cell" headers="DERIVED$01"> <a href="javascript:void(1);" class="fa fa-trash-o"></a> </td> <td class="t-Report-cell" headers="C003">90001</td> <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td> <td class="t-Report-cell" headers="C002"><label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text " id="f02_0001" /></td> <td class="t-Report-cell" headers="C007"><label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text " id="f03_0001" /><input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0001" /><input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden " id="f04_0001" /><input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"><input type="hidden" id="fcud_0001" name="fcud" value="U" /> </td> </tr> </tbody> </table> </div> <div class="t-Report-links"></div> <table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"> <tr> <td colspan="9" align="right"> <table role="presentation"> <tr> <td class="pagination"></td> <td class="pagination"></td> <td nowrap="nowrap" class="pagination"><span class="t-Report-paginationText">1 - 3</span></td> <td class="pagination"></td> <td class="pagination"></td> </tr> </table> </td> </tr> </table> 

With Length == 0

 $(document).on('click', '#btn_process', function() { var tr = $('#init_row_invoice').clone(true); $('table.t-Report-report tbody').append(tr.show()); $(tr).find('input[type=text][name=f03]').val(''); if ($(tr).find('input[type=text][name=f03]').val().length > 0) { $(tr).find('input[type=text][name=f02]').focus(); } else {} }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name=" " value=" "><input id="btn_process" type="submit" value="process" /?<br> <div class="t-Report-tableWrap"> <table class="t-Report-report" summary="Text Test"> <thead> <tr> <th class="t-Report-colHead" align="center" id="DERIVED$01">&nbsp;</th> <th class="t-Report-colHead" align="center" id="C003">Id</th> <th class="t-Report-colHead" align="center" id="C001">Name</th> <th class="t-Report-colHead" align="center" id="C002">Code</th> <th class="t-Report-colHead" align="center" id="C007">Text</th> </tr> </thead> <tbody> <tr id="init_row_invoice" style="display:none;"> <td class="t-Report-cell" headers="DERIVED$01"> <a href="javascript:void();" class="fa fa-trash-o"></a> </td> <td class="t-Report-cell" headers="C003">(null)</td> <td class="t-Report-cell" headers="C001">(null)</td> <td class="t-Report-cell" headers="C002"><label for="f02_0000" id="f02_0000_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f02_0000" /></td> <td class="t-Report-cell" headers="C007"> <label for="f03_0000" id="f03_0000_LABEL" class="u-VisuallyHidden"></label> <input type="text" name="f03" size="15" maxlength="2000" value="" class="u-TF-item u-TF-item--text " id="f03_0000" /> <input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0000" /> <input type="hidden" name="f04" value="" class="u-TF-item u-TF-item--hidden " id="f04_0000" /> <input type="hidden" id="fcs_0000" name="fcs" value=""><input type="hidden" id="fcud_0000" name="fcud" value="D" /> </td> </tr> <tr> <td class="t-Report-cell" headers="DERIVED$01"> <a href="javascript:void(1);" class="fa fa-trash-o"></a> </td> <td class="t-Report-cell" headers="C003">90001</td> <td class="t-Report-cell" headers="C001">Samsung Galaxy J3 Pro</td> <td class="t-Report-cell" headers="C002"><label for="f02_0001" id="f02_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f02" size="15" maxlength="2000" value="123456" class="u-TF-item u-TF-item--text " id="f02_0001" /></td> <td class="t-Report-cell" headers="C007"><label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"></label><input type="text" name="f03" size="15" maxlength="2000" value="1" class="u-TF-item u-TF-item--text " id="f03_0001" /><input type="hidden" name="f01" value="" class="u-TF-item u-TF-item--hidden " id="f01_0001" /><input type="hidden" name="f04" value="1" class="u-TF-item u-TF-item--hidden " id="f04_0001" /><input type="hidden" id="fcs_0001" name="fcs" value="9F677BEDD6F6624C586A9DA8BB60AA3DC1746ED2"><input type="hidden" id="fcud_0001" name="fcud" value="U" /> </td> </tr> </tbody> </table> </div> <div class="t-Report-links"></div> <table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"> <tr> <td colspan="9" align="right"> <table role="presentation"> <tr> <td class="pagination"></td> <td class="pagination"></td> <td nowrap="nowrap" class="pagination"><span class="t-Report-paginationText">1 - 3</span></td> <td class="pagination"></td> <td class="pagination"></td> </tr> </table> </td> </tr> </table> 

Check the length like:

$(tr).find('input[type=text][name=f03]').val().length > 0

Set focus

$(tr).find('input[type=text][name=f02]').focus();