0

Actualmente ya me puedo desplazar entre las celdas <td></td> a partir del teclado, además ya puedo editar el contenido, mi problema es cuando edito el contenido de las celdas y estas se vuelven grandes (largas en tamaño de caracteres) a la tabla le aparece un scroll y ya después cuando sigo navegando a través del teclado la celda seleccionada ya no es visible, me podrían ayudar para que la celda seleccionada sea siempre visible y el scroll siempre lo siga o algo por el estilo.

Hace lo que yo necesito pero forzosamente tengo que dar click sobre la tabla

let start;
let isEditing = false;
let kc = 0; //Key Code
let tableDT;

$(function() {
    $("body input").prop("autocomplete", false);
    $("table").focus();
    //tableDT = $('#example').DataTable();

    start = $('#start');
    start.addClass('cell-focus');

    document.onkeydown = checkKey;
    document.onclick = deleteInput;

    //Bloque para mover las celdas activas
    function checkKey(e) {
        if (isEditing) return;
        e = e || window.event;
        kc = e.keyCode;
        if (kc === 38) {
            // up arrow
            doTheNeedful($(start.parent().prev().find('td')[start.index()]));
        } else if (kc === 40) {
            // down arrow
            doTheNeedful($(start.parent().next().find('td')[start.index()]));
        } else if (kc === 37) {
            // left arrow
            doTheNeedful(start.prev());
        } else if (kc === 39) {
            // right arrow
            doTheNeedful(start.next());
        }else if (kc === 13) {
            // Enter
            replacedByAnInputText(e);
        }else if (kc === 9) {
            //Tab
            if (e.shiftKey){
                if (start.prev().length === 0){
                    doTheNeedful($(start.parent().prev().children().last()));
                }else{
                    doTheNeedful(start.prev());
                }
            } else{
                if (start.next().length === 0){
                    doTheNeedful($(start.parent().next().children()[0]));
                }else{
                    doTheNeedful(start.next());
                }
            }
            e.stopPropagation();
            e.preventDefault();
        }
    }

    function deleteInput(e) {
        console.log(start)
    }

    $("#example tr").on('dblclick',function(e) {
        replacedByAnInputText(e)
    }).on('click', function(e) {
        if ($(e.target).closest('td')) {
            start.removeClass('cell-focus');
            if (start.find('input').length>0){
                start.html($(start.find('input')[0]).val()).removeClass("p-0");
                isEditing = false;
            }
            start = $(e.target);
            start.addClass('cell-focus');
            e.stopPropagation();
        }
    }).on('keydown', "#editing", function (e) {
        e = e || window.event;
        kc = e.keyCode;
        if (kc === 13 || kc === 27){
            if (start.find('input').length>0){
                start.html($(start.find('input')[0]).val()).removeClass("p-0");
                doTheNeedful(start);
                isEditing = false;
                //tableDT.ajax.reload();
                e.stopPropagation();
                e.preventDefault();
            }
        }else if (kc == 9){
            start.html($(start.find('input')[0]).val()).removeClass("p-0");
            //doTheNeedful(start);
            isEditing = false;
            //tableDT.ajax.reload();
            if (e.shiftKey){
                if (start.prev().length === 0){
                    doTheNeedful($(start.parent().prev().children().last()));
                }else{
                    doTheNeedful(start.prev());
                }
            } else{
                if (start.next().length === 0){
                    doTheNeedful($(start.parent().next().children()[0]));
                }else{
                    doTheNeedful(start.next());
                }
            }
            e.stopPropagation();
            e.preventDefault();
        }
    });
} );

function replacedByAnInputText(e) {
    start.removeClass('cell-focus').addClass("p-0");
    let input = $('<input class="form-control rounded-0 form-control-sm" type="text" id="editing" value="' + start.html() + '">');
    start.html(input);
    $(start.find('input')[0]).select().focus();
    e.preventDefault();
    e.stopPropagation();
    isEditing = true;
}

function doTheNeedful(sibling) {
    if (sibling.length === 1) {
        start.removeClass('cell-focus');
        sibling.addClass('cell-focus');
        start = sibling;
    }
}
.cell-focus {
                background-color: green;
                color: white;
            }
            td, th{
                white-space: nowrap;
            }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<div class="container">
    <div class="row">
        <div class="col-12">
            <table id="example" class="table table-striped table-sm table-responsive" style="width:100%">
                <thead>
                <tr>
                    <th>N°</th>
                    <th>Desarrollo</th>
                    <th>Enero</th>
                    <th>Febrero</th>
                    <th>Marzo</th>
                    <th>Abril</th>
                    <th>Mayo</th>
                    <th>Junio</th>
                    <th>Julio</th>
                    <th>Agosto</th>
                    <th>Septiembre</th>
                    <th>Octubre</th>
                    <th>Noviembre</th>
                    <th>Diciembre</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="start">1</td>
                    <td>Ejemplo de desarrollo 1</td>
                    <td> $46,762.07 </td>
                    <td> $37,697.94 </td>
                    <td> $97,052.56 </td>
                    <td> $58,454.34 </td>
                    <td> $11,393.24 </td>
                    <td> $64,789.92 </td>
                    <td> $36,711.51 </td>
                    <td> $84,038.15 </td>
                    <td> $53,776.74 </td>
                    <td> $99,424.76 </td>
                    <td> $53,932.62 </td>
                    <td> $45,433.82 </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Ejemplo de desarrollo 2</td>
                    <td>  $10,213.46  </td>
                    <td>  $53,932.62  </td>
                    <td>  $45,433.82  </td>
                    <td>  $67,714.60  </td>
                    <td>  $19,085.43  </td>
                    <td>  $59,297.38  </td>
                    <td>  $22,056.71  </td>
                    <td>  $58,732.53  </td>
                    <td>  $56,752.68  </td>
                    <td>  $33,157.53  </td>
                    <td>  $33,857.04  </td>
                    <td>  $38,155.85  </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Ejemplo de desarrollo 3</td>
                    <td>   $52,617.91    </td>
                    <td>   $18,100.89   </td>
                    <td>   $82,234.38   </td>
                    <td>   $61,742.69   </td>
                    <td>   $48,326.86   </td>
                    <td>   $95,219.42   </td>
                    <td>   $67,941.98   </td>
                    <td>   $62,101.14   </td>
                    <td>   $65,173.30   </td>
                    <td>   $80,842.48   </td>
                    <td>   $60,727.48   </td>
                    <td>   $39,458.24   </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

2 respuestas 2

2

He añadido un atributo tabindex a los td que tienen números. Después de seleccionar una celda puedes utilizar el tab de tu teclado para navegar entre tds.

Espero que sea lo que preguntabas.

let trs = Array.from(document.querySelectorAll("tbody tr"));
let tds = []
trs.map((tr) =>{
  let _tds = Array.from(tr.querySelectorAll("td"));
   _tds.splice(0, 2);
  tds.push(..._tds)
})
tds.map((td,i) =>{
  td.setAttribute("tabindex",i+1);
})
.cell-focus {
                background-color: green;
                color: white;
            }
            td, th{
                white-space: nowrap;
            }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<div class="container">
    <div class="row">
        <div class="col-12">
            <table id="example" class="table table-striped table-sm table-responsive" style="width:100%">
                <thead>
                <tr>
                    <th>N°</th>
                    <th>Desarrollo</th>
                    <th>Enero</th>
                    <th>Febrero</th>
                    <th>Marzo</th>
                    <th>Abril</th>
                    <th>Mayo</th>
                    <th>Junio</th>
                    <th>Julio</th>
                    <th>Agosto</th>
                    <th>Septiembre</th>
                    <th>Octubre</th>
                    <th>Noviembre</th>
                    <th>Diciembre</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="start">1</td>
                    <td>Ejemplo de desarrollo 1</td>
                    <td> $46,762.07 </td>
                    <td> $37,697.94 </td>
                    <td> $97,052.56 </td>
                    <td> $58,454.34 </td>
                    <td> $11,393.24 </td>
                    <td> $64,789.92 </td>
                    <td> $36,711.51 </td>
                    <td> $84,038.15 </td>
                    <td> $53,776.74 </td>
                    <td> $99,424.76 </td>
                    <td> $53,932.62 </td>
                    <td> $45,433.82 </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Ejemplo de desarrollo 2</td>
                    <td>  $10,213.46  </td>
                    <td>  $53,932.62  </td>
                    <td>  $45,433.82  </td>
                    <td>  $67,714.60  </td>
                    <td>  $19,085.43  </td>
                    <td>  $59,297.38  </td>
                    <td>  $22,056.71  </td>
                    <td>  $58,732.53  </td>
                    <td>  $56,752.68  </td>
                    <td>  $33,157.53  </td>
                    <td>  $33,857.04  </td>
                    <td>  $38,155.85  </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Ejemplo de desarrollo 3</td>
                    <td>   $52,617.91    </td>
                    <td>   $18,100.89   </td>
                    <td>   $82,234.38   </td>
                    <td>   $61,742.69   </td>
                    <td>   $48,326.86   </td>
                    <td>   $95,219.42   </td>
                    <td>   $67,941.98   </td>
                    <td>   $62,101.14   </td>
                    <td>   $65,173.30   </td>
                    <td>   $80,842.48   </td>
                    <td>   $60,727.48   </td>
                    <td>   $39,458.24   </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

0
var simpleEditor = new SimpleTableCellEditor("ensambleSimpleEditableTable", { navigation: true });
simpleEditor.SetEditableClass("editMe1");


$('#ensambleSimpleEditableTable').on("cell:edited", function (event) {
    console.log(`'${event.oldValue}' changed to '${event.newValue}'`);
    let trs = Array.from(document.querySelectorAll("tbody tr"));
    let tds = []
    trs.map((tr) => {
        let _tds = Array.from(tr.querySelectorAll("td"));
        _tds.splice(0, 2);
        tds.push(..._tds)
    })
    tds.map((td, i) => {
        td.setAttribute("tabindex", i + 1);
    })
    var simpleEditor = new SimpleTableCellEditor("ensambleSimpleEditableTable", { navigation: false });
    simpleEditor.SetEditableClass("tabindex");
});
2
  • Buenas, tal vez te sirva es este código, para moverte con los tab y a la vez editar la edición de los td. Me sirvió el codigo de ejemplo. saludos Commented el 17 feb. 2022 a las 20:02
  • Bienvenido/a a Stack Overflow en español: haz el recorrido de bienvenida para conocer el funcionamiento del sitio. Ten en cuenta que las respuestas van para todos, no solo para el OP (autor de la pregunta), por lo tanto debes describir brevemente el funcionamiento del código que proporcionaste. Tal vez el OP entienda qué quisiste hacer, pero otras personas no. Lee Cómo responder y pulsa en editar para mejorar tu respuesta.
    – padaleiana
    Commented el 18 feb. 2022 a las 12:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.