Tabella "autoscorrevole" su div

**domge** · 11-03-2017, 23:01

Salve, su una pagina html, ho una tabella creata dinamicamente e posizionata dentro una div.
La div ha delle dimensioni stabilite in base a esigenze di layout della pagina.
La tabella e' creata (sia come struttura che come popolazione dei dati) in maniera dinamica da codice javascript. Il tutto funziona egregiamente senza problemi.
Essendo le dimensioni della div stabilite, quando la tabella raggiunge un certo numero di righe (11 nel mio caso), aggiungendo un'altra riga, sul lato destro mi compare automaticamente la scrollbar, e aggiungendo ulteriori righe alla tabella, le righe aggiunte sono "nascoste" dalle dimensioni della div ecc.
Intervenendo con il mouse sulla barra della scrollbar tutto il contenuto della tabella scorre verso l'alto e posso cosi vedere l'ultime riga inserita ecc.
Chiedo se c'e' una funzione, in javascript o altro metodo, che mi fa scorrere in automatico, le righe di questa tabella, in modo da "vedere" sempre l'ultima riga (ovvero le ultime 11 righe) inserita della tabella in questione. Ovviamente non mi interessa vedere piu le prime righe dalla tabella.
ringrazio in anticipo.

**badaze** · 11-03-2017, 23:17

Posta il codice che hai. Cioè il codice sorgente della pagina con più di 11 righe.
Cosi mi risparmio un po' di tempo.

**domge** · 11-03-2017, 23:33

codice:

<div id="sales_items">
   <table width="100%" id="tbl_sitems" cellspacing="0">
      <tbody>
         <tr class="">
            <th width="80%">ARTICOLO</th>
            <th width="20%" align="right">Q.TA</th>
            <th width="5%" align="center">C_IVA</th>
            <th width="25%" align="right">PREZZO</th>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="43">
               <input type="hidden" name="items_name[]" value="PANE">
               PANE</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="34">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               34</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="40" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="2.00" size="3"></td>
         </tr>
         <tr class="selected">
            <td class="tvalue"><input type="hidden" name="items[]" value="2">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO h">
               ARTICOLO GENERICO h</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="8">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               8</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="1" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="undefined" size="3">
               <input type="hidden" name="itemstotalprice[]" value="1.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="3">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO m">
               ARTICOLO GENERICO m</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="91">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               91</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="2" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="undefined" size="3">
               <input type="hidden" name="itemstotalprice[]" value="5.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="2">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO h">
               ARTICOLO GENERICO h</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="8">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               8</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="1" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="undefined" size="3">
               <input type="hidden" name="itemstotalprice[]" value="7.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="2">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO h">
               ARTICOLO GENERICO h</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="8">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               8</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="1" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="undefined" size="3">
               <input type="hidden" name="itemstotalprice[]" value="2.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="2">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO h">
               ARTICOLO GENERICO h</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="8">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               8</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="1" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="undefined" size="3">
               <input type="hidden" name="itemstotalprice[]" value="60.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="3">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO m">
               ARTICOLO GENERICO m</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="91">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               91</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="2" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="0.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="2288">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO 1,5 euro ">
               ARTICOLO GENERICO 1,5 euro </td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="0">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               0</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="001200" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="1.5000" size="3">
               <input type="text" name="itemsprice[]" value="1.5000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="0.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="45">
               <input type="hidden" name="items_name[]" value="FARINA">
               FARINA</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="34">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               34</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="21" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="0.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="2292">
               <input type="hidden" name="items_name[]" value="ARTICOLO GENERICO 2 euro ">
               ARTICOLO GENERICO 2 euro </td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="0">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               0</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="00200" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="2.0000" size="3">
               <input type="text" name="itemsprice[]" value="2.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="0.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="45">
               <input type="hidden" name="items_name[]" value="FARINA">
               FARINA</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="34">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               34</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="21" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="0.00" size="3"></td>
         </tr>
         <tr class="">
            <td class="tvalue"><input type="hidden" name="items[]" value="45">
               <input type="hidden" name="items_name[]" value="FARINA">
               FARINA</td>
            <td class="tvalue" align="right"><input type="text" class="inp2" name="itemsqty[]" value="1" size="6" onchange="calcS()"></td>
            <td class="tvalue" align="right"><input type="hidden" name="itemstax[]" value="34">
               <input type="hidden" name="itemstotaltax[]" value="0.00">
               34</td>
            <td class="tvalue" align="right"><input type="hidden" name="itemsbprice[]" value="21" size="6" onchange="calcS()">
               <input type="hidden" name="itemsuprice[]" value="0.0000" size="3">
               <input type="text" name="itemsprice[]" value="0.0000" size="6">
               <input type="hidden" name="numerocassa[]" value="1" size="3">
               <input type="hidden" name="itemstotalprice[]" value="0.00" size="3"></td>
         </tr>
      </tbody>
   </table>
</div>

**badaze** · 11-03-2017, 23:52

Prova cosi.

Se vuoi qualcosa di automatico prova ad usare setInterval.

Codice PHP:


<script>
function scroll() {
 document.getElementById("sales_items").scrollTop = document.getElementById("sales_items").scrollHeight ;
}
</script>
</head>
<body >
<input type="button" value="Scroll" onclick="scroll()"/>
<div id="sales_items" style="height:300px;overflow-x:hidden;overflow-y:visible;">

**KillerWorm** · 12-03-2017, 01:55

Chiedo se c'e' una funzione, in javascript o altro metodo, che mi fa scorrere in automatico, le righe di questa tabella, in modo da "vedere" sempre l'ultima riga (ovvero le ultime 11 righe) inserita della tabella in questione. Ovviamente non mi interessa vedere piu le prime righe dalla tabella.

Ciao, è buona la soluzione di badaze (vedi comunque nota in basso) che crea uno scorrimento automatico - in effetti è ciò che hai chiesto - ma da quanto hai poi specificato "Ovviamente non mi interessa vedere piu le prime righe dalla tabella", mi pare di capire che tu voglia proprio nascondere/eliminare le righe iniziali, escludendo quindi anche la barra di scorrimento. Giusto?

Se così fosse (potrei comunque aver frainteso io, e nel caso mi scuso), una semplice soluzione potrebbe essere quella di "nascondere" le righe via CSS, impostandole con display:none.

Sul CSS potresti quindi impostare una cosa del genere:

codice:

#tbl_sitems tr:not(:first-child):nth-last-child(n+12){
  display: none;
}

Questo andrà a "nascondere" le righe dalla 2 (cioè esclusa la prima che è quella di intestazione) fino alla 12, lasciando quindi visibili le ultime 11 (è chiaramente la prima).

NOTA: occhio all'uso del nome scroll (per la funzione) perché su alcuni browser (ad esempio su FF) resta ancora utilizzato come alias di scrollTo, per cui risulta essere un metodo dell'oggetto window (vedi documentazione), creerebbe sicuramente qualche conflitto e la tua funzione non funzionerebbe. Meglio usare un altro nome eventualmente.

**domge** · 16-03-2017, 17:43

Risolto, Grazie per le risposte, ottima risposta quella di badaze. Funziona alla grande. Su risposta di KillerWorm: non ho provato nulla anche se interessante a sapersi per usi futuri, proverò appena ho un po di tempo. In realta voglio, in questo caso mio, solo far scorrere verso su gli articoli inseriti, non eliminarli. grazie.

Discussione: Tabella "autoscorrevole" su div

Strumenti discussione

Ricerca discussione

Visualizza

Tabella "autoscorrevole" su div

Permessi di invio