Navigate horizontal scroll by pressing tab

Navigation
11

I'm using the datatables plugin. I built a table where the first four columns are fixed and the others (which will be generated "dynamically") have input for quantity typing.

My intention is that when the user presses tab to go to the next input, the horizontal scroll accompanies, currently (except for IE) the input gains focus but as the scroll does not move, it stays there hidden in overflow.

Follow the image of how my table is

HowcanImakethedesiredeffectwork(mostly)onChrome?

MyHTMLstructure:

<divid="novoPedidoTabelaA_wrapper" class="dataTables_wrapper form-inline no-footer">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="DTFC_ScrollWrapper" style="position: relative; clear: both; height: 182px;">
        <div class="DTFC_RightWrapper" style="position: absolute; top: 0; left: 0;">
            <div class="DTFC_RightHeadWrapper" style="position: relative; top: 0; left: 0;">
                <div class="DTFC_RightHeadBlocker DTFC_Blocker" style="position: absolute; top: 0; bottom: 0;"></div>
            </div>
            <div class="DTFC_RightBodyWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;">
                <div class="DTFC_RightBodyLiner" style="position: relative; top: 0; left: 0; overflow-y: scroll;"></div>
            </div>
            <div class="DTFC_RightFootWrapper" style="position: relative; top: 0; left: 0;">
                <div class="DTFC_RightFootBlocker DTFC_Blocker" style="position: absolute; top: 0; bottom: 0;"></div>
            </div>
        </div>
        <div class="dataTables_scroll">
            <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
                <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 3316px; padding-right: 0px;">
                    <table style="min-height: 100px !important; margin-left: 0px; width: 3316px;" class="table table-striped table-bordered top dataTable no-footer" cellspacing="0" width="100%" role="grid">
                        <thead>
                            <tr role="row" style="height: 56px;">
                                <th style="width: 307px !important; min-width: 357px !important;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1">Produto</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">Embalagem</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 113px;">Solicitado (QTD)</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 102px;">Digitado (QTD)</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 06/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 07/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 07/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 08/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 08/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 09/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 09/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 10/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 10/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 11/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 11/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 12/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 12/2015</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 01/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 01/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 02/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 02/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 03/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 03/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 04/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 04/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 05/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 05/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">1a - 06/2016</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">2a - 06/2016</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="dataTables_scrollBody" style="overflow: auto; width: 100%;">
                <table id="novoPedidoTabelaA" style="min-height: 100px !important; width: 3315px;" class="table table-striped table-bordered top dataTable no-footer" cellspacing="0" role="grid" aria-describedby="novoPedidoTabelaA_info">
                    <thead>
                        <tr role="row" style="height: 0px;">
                            <th style="width: 300px !important; min-width: 300px !important; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Produto</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Embalagem</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 113px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Solicitado (QTD)</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 102px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Digitado (QTD)</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 06/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 07/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 07/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 08/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 08/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 09/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 09/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 10/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 10/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 11/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 11/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 12/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 12/2015</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 01/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 01/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 02/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 02/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 03/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 03/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 04/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 04/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 05/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 05/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">1a - 06/2016</div>
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                <div class="dataTables_sizing" style="height: 0; overflow: hidden;">2a - 06/2016</div>
                            </th>
                        </tr>
                    </thead>


                    <tbody>




                        <tr class="ListaProdutos odd" data-identificador="198" data-solicitado="12" data-nome="2,4-D 806 12X1 L" style="cursor: pointer; height: 99px;" role="row">
                            <td class="itemEnviado">
                                <h5 class="ProdutoDescricao" data-produtodescid="198" style="min-width: 299px !important;">2,4-D 806 12X1 L (DQDA.806.003)</h5>
                            </td>
                            <td class="itemEnviado">12</td>
                            <td class="itemEnviado">12</td>
                            <td class="QTDDigitadoProduto itemEnviado" data-iditem="198">12</td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-6-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-7-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-7-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-8-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-8-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-9-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-9-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-10-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-10-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-11-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-11-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-12-15" data-valor="8,5" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2015-12-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-1-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-1-28" data-embalagem="12" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-2-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-2-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-3-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-3-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-4-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-4-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-5-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-5-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-6-15" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                            <td class="itemEnviado">
                                <input class="data" style="height: 10px;" data-data="2016-6-28" data-embalagem="12" data-valor="8,5" data-itemid="198" data-pedido="6" data-produtoqtd="12" type="text"></td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="DTFC_LeftWrapper" style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1px;">
            <div class="DTFC_LeftHeadWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;">
                <table style="min-height: 100px !important; margin-left: 0px; width: 100%;" class="table table-striped table-bordered top dataTable no-footer DTFC_Cloned" cellspacing="0" width="100%" role="grid">
                    <thead>
                        <tr role="row" style="height: 56px;">
                            <th style="width: 300px !important; min-width: 300px !important;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1">Produto</th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">Embalagem</th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px;">Solicitado (QTD)</th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 91px;">Digitado (QTD)</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="DTFC_LeftBodyWrapper" style="position: relative; top: 0px; left: 0px; overflow: hidden; height: 101px;">
                <div class="DTFC_LeftBodyLiner" style="position: relative; top: 0px; left: 0px; overflow-y: hidden; margin-top: -6px; width: 657px; height: 101px;">
                    <table style="min-height: 100px !important; width: 100%; padding: 0px; margin: 0px;" class="table table-striped table-bordered top dataTable no-footer DTFC_Cloned" cellspacing="0" role="grid" aria-describedby="novoPedidoTabelaA_info">
                        <thead>
                            <tr role="row" style="height: 0px;">
                                <th style="width: 300px !important; min-width: 300px !important; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" id="produtoAlterar" class="TesteTeste sorting_disabled" rowspan="1" colspan="1"></th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"></th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 90px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"></th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 91px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"></th>
                            </tr>
                        </thead>


                        <tbody>
                            <tr class="ListaProdutos odd" data-identificador="198" data-solicitado="12" data-nome="2,4-D 806 12X1 L" style="cursor: pointer; height: 99px;" role="row">
                                <td class="itemEnviado">
                                    <h5 class="ProdutoDescricao" data-produtodescid="198">2,4-D 806 12X1 L (DQDA.806.003)</h5>
                                </td>
                                <td class="itemEnviado">12</td>
                                <td class="itemEnviado">12</td>
                                <td class="QTDDigitadoProduto itemEnviado" data-iditem="198">12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="DTFC_LeftFootWrapper" style="position: relative; top: 0; left: 0; overflow: hidden;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="dataTables_info" id="novoPedidoTabelaA_info" role="status" aria-live="polite">Mostrando de 1 a 1 de 1 registros</div>
        </div>
        <div class="col-xs-6"></div>
    </div>
</div>
    
asked by anonymous 16.06.2015 / 16:29

3 answers

1

As the scroll navigates only in input without value, I resolved as follows: 

 $('input').focus(function () {
    var val = "";
    var attr = $(this).attr('placeholder');
    if (typeof attr !== typeof undefined && attr !== false) {
       val = $(this).attr("placeholder")
    } else {
       val = $(this).val();
    }
    $(this).val('');
    $(this).attr("placeholder", val);
 });

  $('.data').blur(function () {
        $('.data').each(function () {
            var attr = $(this).attr('placeholder');
            if ($(this).val() == "") {
                if (typeof attr !== typeof undefined && attr !== false) {
                    $(this).val($(this).attr("placeholder"));
                } else {
                    $(this).val(0);
                }
            } else {
                $(this).attr('placeholder', $(this).val());
            }
        });
});

The logic is that simple. In focus I assign a null value to input and store the old value in placeholder .

I do not know if I have a value entry, if so, I assign this new value to blur .

So the placeholder will be empty every time you press input

In addition, I used one of the tab that Guilherme Nascimento spent. I just made a little modification. 

$(function() {
    $("td:nth-child(5) input.data").focus(function() {
        $(".dataTables_scrollBody").animate({
              "scrollLeft": 0
        });
    });
});
    
03.07.2015 / 20:53
6

I took the answer from @Guilherme Nascimento and made some modifications.

Using jquery 1.11.1, it worked in IE 9.

Example below works for any type of column width and works at the end of the scroll: 

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>$(document).ready(function(){varfields=$("input[type=text]", $('#my_table'));
			fields.focus(function() {
				var my_target = $(this);
				var dist = my_target.offset().left + $('#my_table').scrollLeft() - 10;
				$('#my_table').stop().animate(
					{ 'scrollLeft' : dist },
					200,
					'swing'
				);
			});
		});
		</script>
	</head>
	<body>
		<div id="my_table" style="overflow-x: scroll; width: 50%;">
		<table>
			<tr>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
				<td><input type="text"/></td>
			</tr>
		</table>
		</div>
	</body>
</html>

The idea is to put id="my_table" in the div that contains the table with scroll. In this table you can add cells / rows / columns dynamically at will. The code will work.

    
25.06.2015 / 22:00
4

I do not know which version of Internet Explorer , but many problems are caused due to QuircksMode , to help avoid problems of this type I recommend that you use this meta-tag: 

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

However the problem may be with datatables as you mentioned, I do not have the HTML structure of your code (the inputs and classes used in them, so I'll post a generic example and you can adapt it).

First I think that instead of overflow-x: hidden; you should use overflow-y: hidden; , because you want a horizontal scroll, not vertical, am I right? (although the script I posted will work in both cases).

  

As the problem only occurs in InternetExplorer you can use if ($.browser.msie) { to avoid applying the effect to other browsers. 

$(function() {
        var tabela = $("#Tabela");
        var fields = $("input[type=text]", tabela);

        fields.focus(function () {
            var $this = $(this);

            var fieldX  = $this.offset().left;
            var tableX  = tabela.offset().left;
            var scrollX = tabela.scrollLeft();
            var tdWidth = Math.round($this.parent().width() / 2);

            setTimeout(function() {
                //Delay para previnir o scroll automatico do navegador atrapalhar o $.animate
                tabela.stop().animate({
                    "scrollLeft": fieldX - tableX + scrollX - tdWidth
                }, 200);
            }, 10);
        });
});
#Tabela {
    overflow: scroll;
    overflow-y: hidden;
    display: block;
    white-space: nowrap;
    border: 1px #ccc solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><metahttp-equiv="X-UA-Compatible" content="IE=Edge">

<div id="Tabela">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>Coluna 1</th>
                <th>Coluna 2</th>
                <th>Coluna 3</th>
                <th>Coluna 4</th>
                <th>Coluna 5</th>
                <th>Coluna 6</th>
                <th>Coluna 7</th>
                <th>Coluna 8</th>
                <th>Coluna 9</th>
                <th>Coluna 10</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
        </tbody>
    </table>
</div>

Problem with custom table

Your problem here is not with the table, the problem is that you have created two, one is displayed 50% and overlaps, and the other (where the inputs are) occupies "100%", but under the first paragraph. In other words, it works perfectly, the problem is that some inputs will always fall below the overlapped table. So the problem is not with the table, but with a specific thing you created. Your code has a lot of inline styles as well as several items that do not seem to be needed, but I'll try to reuse the code, see if it works.

The element that seems to use the scroll is dataTables_scrollBody so the selector must be something like .dataTables_scrollBody . Since the first TD to have input in your table is the fifth one, then you have to use this td.itemEnviado:nth-child(5) input.data selector (change if you add more TDs). The js code should look like this, it will take the table scroll back to the left: 

<script type="text/javascript">
$(function() {
    $("td.itemEnviado:nth-child(5) input.data").focus(function() {
        $(".dataTables_scrollBody").scrollLeft(0);
    });
});
</script>

If you want to use an animated effect: 

<script type="text/javascript">
$(function() {
    $("td.itemEnviado:nth-child(5) input.data").focus(function() {
        $(".dataTables_scrollBody").animate({
              "scrollLeft": 0
        });
    });
});
</script>

Example in jsfiddle: link

    
24.06.2015 / 23:09
What does the term "Consume an API" mean? How to change the namespace of a C #