Spostare dinamicamente delle righe statiche

**appsistem** · 30-01-2023, 17:03

Un saluto a tutti gli amici del forum,
avrei bisogno del vostro supporto per poter avere la possibilità di spostare dinamicamente tenendo premuto il sinistro del mouse verso l'alto o verso il basso delle righe attualmente statiche.

Cerco di spiegarmi meglio portando come esempio proprio il mio codice:

Attualmente quando creo una commessa di lavoro utilizzo come codice html questo:

codice:

	<table id="commessa">
		<tbody>
		<tr>
			<td>Intervento</td>
			<td>Fornitore</td>
			<td>Q.t&agrave;</td>
			<td>Unitario</td>
			<td>Sconto %</td>
			<td>Totale</td>
			<td>Aggiungi</td>
		</tr>


			<tr class="righe">
			<td><input type="text" name="itr1" id="itr1" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49" required ></td>
			<td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
			<td><input type="text" name="q1" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0" placeholder="0" required></td>
			<td><input type="text" name="iu1" class="t2 somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="6" value="0.0" placeholder="0.00" autocomplete="off"></td>
			<td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0" placeholder="sconto" autocomplete="off"></td>
			<td><input type="text" name="imp_1" id="imp_1" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td>
			<td><img src="images/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
			</tr>


		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>Tot. Gen.</td>
			<td><input type="text" name="totale" class="t2" id="totale" size="7" value="" placeholder="0.00" readonly></td>
		</tr>
		</tbody>
	</table>

mentre come codice javascript questo:

codice:

<!-- SCRIPT ANDREA CAVICCHI HTML.IT -->


<script type="text/javascript">
$(document).ready(function(){
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
    
    $('body').on('click', '.add', function() {
    cindex++;
    
    if(cindex<=15){
    var newRow = '<tr class="righe"><td><input type="text" name="itr'+cindex+'" id="itr'+cindex+'" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for'+cindex+'" id="for'+cindex+'" class="t1" size="10"></td><td><input type="text" name="q'+cindex+'" class="t2 somma" id="q'+cindex+'" size="3" value="0.0" onkeyup="SommaRiga('+cindex+')" placeholder="0"></td><td><input type="text" name="iu'+cindex+'" class="t2 somma"  onBlur="Format('+cindex+')" onkeyup="SommaRiga('+cindex+')" id="iu'+cindex+'" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc'+cindex+'" class="t2 somma" onkeyup="Virgola('+cindex+')" id="sc'+cindex+'" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_'+cindex+'" id="imp_'+cindex+'" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add'+cindex+'" class="add"></td></tr>'
    $("#commessa tbody tr").eq((cindex-1)).after(newRow)
    }else{
    alert('Non puoi inserire più di 15 righe');
    return false;
    }
        $('.add').not(':last').addClass( 'addisable' ).removeClass( 'add' )
        }).on('focus','.somma', function(){
    $(this).not('input[name^="imp_"]').val('')
    })
});
function Format(ele){
    var valore = ($("#iu"+ele).val()*1)
    $("#iu"+ele).val(valore.toFixed(2))
}


function Virgola(nele){
    var cambia = $("#sc"+nele).val().replace(/\,/g,'.')
    $("#sc"+nele).val(cambia)
    SommaRiga(nele)
}


function SommaRiga(num){
var tot = 0
    var qt = $("#q"+num).val()
    var unitario = $("#iu"+num).val()
    var sc = $("#sc"+num).val()
    var Tot = (qt*1*unitario*1)
    var impsc = (Tot/100*sc)
    var somma = (Tot-impsc)
    if(somma>0){
        $("#imp_"+num).val(somma.toFixed(2))
    }else{
        $("#imp_"+num).val('')
        $("#iu"+num).val('')
    }
    var elem = $('input[name^="imp_"]')
    for(i=0; i<elem.length;i++) {
    tot += (elem.eq(i).val()*1)
    };
    $("#totale").val(tot.toFixed(2))
    //alert(num)
}
</script>

Come risultato ottengo all'apertura della commessa, una sola riga con accanto il tasto "+" per aggiungerne altre e fin qui tutto ok.

Il problema nasce quando inavvertitamente viene compilata una riga con tutti i dati, descrizione, fornitore, q.tà unitaria , prezzo, ecc. per poi successivamente rendermi conto che la riga andava messa prima o dopo, non avendo possibilità di spostarla dinamicamente, mi tocca cancellare tutta la riga e riscriverla daccapo.

Ho visto che molte pagine web, dopo la compilazione delle righe, danno la possibilità, tenendo premuto il pulsante sinistro del mouse, di ordinarle portandole sopra o sotto.

Mi potreste per favore dare una mano, inutile dire (perchè si comprende anche dal codice scritto), che non sono un professionista programmatore ma una persona fortemente appassionata.

Grazie anticipatamente

**KillerWorm** · 30-01-2023, 23:57

Ciao, tecnicamente questa funzione viene detta "table drag and drop". Svilupparla da zero, per ottenere una cosa funzionale e funzionante, non è così semplice. Potresti tuttalpiù usare qualche plugin jQuery di appoggio oppure l'estensione jQuery UI, la quale fornisce anche le funzionalità di trascinamento e ordinamento applicabili anche per il tuo caso. Con qualche semplice ricerca sono sicuro che si trovano facilmente guide, tutorial, demo e quant'altro ti serve per poter mettere su ciò che chiedi.

Fai però attenzione, bisogna considerare bene il tuo discorso "spostare le righe tenendo premuto il sinistro del mouse" perché le tue righe contengono degli elementi sensibili agli eventi mouse (vedi i campi input) che andrebbero ad interferire sull'azione di trascinamento. Eventualmente può essere utile creare una colonna, cioè una specifica cella per riga, da usare come "maniglia" per il trascinamento.

Un'alternativa al "drag and drop", più semplice a livello di sviluppo, potrebbe essere quella di usare due semplici pulsantini ("sposta su" e "sposta giù" ) da riportare sempre in una specifica cella per ogni riga, in modo da applicare la funzione di spostamento attraverso il loro click. Certo, rispetto al trascinamento è una funzionalità meno friendly per l'utente ma è sicuramente più semplice metterla in piedi a livello di programmazione se la si sviluppa da zero.

Intanto ti invito a fare qualche ricerca per vedere cosa riesci a trovare, così da farti un'idea e magari cercare di applicarlo al tuo caso. Se poi ti dovesse servire ulteriore aiuto nell'applicazione, puoi chiedere qui stesso.

Fai sapere.

**appsistem** · 31-01-2023, 10:12

Buongiorno @KillerWorm,
anzitutto grazie infinite per la risposta e per la precisazione sul nome esatto della funzionalità che sto ricercando,
da quello che mi sembra di intuire la soluzione al momento più fattibile per me sarebbe quella delle freccette anche se, so come inserire un'ulteriore colonna, ma non saprei proprio da dove cominciare per implementare le "freccette", anche perchè immagino a livello "logico" che la prima colonna debba mostrare solo una freccia che guarda verso il basso, l'ultima una freccia verso l'alto e naturalmente le intermedie devono mostrare entrambe le freccie su e giù.

Originariamente inviata da KillerWorm

Un'alternativa al "drag and drop", più semplice a livello di sviluppo, potrebbe essere quella di usare due semplici pulsantini ("sposta su" e "sposta giù" ) da riportare sempre in una specifica cella per ogni riga, in modo da applicare la funzione di spostamento attraverso il loro click. Certo, rispetto al trascinamento è una funzionalità meno friendly per l'utente ma è sicuramente più semplice metterla in piedi a livello di programmazione se la si sviluppa da zero.

Adesso provo ad effettuare una ricerca su google e cerco di trovare qualche esempio che possa fare al caso mio, sono un appassionato di programmazione è un "mondo" che mi affascina in maniera indescrivibile ma ho preso una strada lavorativa completamente diversa, ovvero mi occupo di consulenza sistemistica, pertanto spero perdoniate sin da ora se scrivo qualche stupidaggine.

Spero di aggiornare presto il thread nella speranza di poter aiutare qualche utente che ha le mie stesse esigenze.

**appsistem** · 31-01-2023, 12:39

Rieccomi,
ho provveduto a modificare il codice html della tabella in questo modo:

codice:

<table id="commessa">
        <tbody>
        <tr>
            <td>Intervento</td>
            <td>Fornitore</td>
            <td>Q.t&agrave;</td>
            <td>Unitario</td>
            <td>Sconto %</td>
            <td>Totale</td>
            <td>Add</td>
            <!--<td>Move</td>-->
        </tr>

            <tr class="righe" draggable="true" ondragstart="start()" ondragover="dragover()">
            <td><input type="text" name="itr1" id="itr1" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49" required ></td>
            <td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
            <td><input type="text" name="q1" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0" placeholder="0" required></td>
            <td><input type="text" name="iu1" class="t2 somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="6" value="0.0" placeholder="0.00" autocomplete="off"></td>
            <td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0" placeholder="sconto" autocomplete="off"></td>
            <td><input type="text" name="imp_1" id="imp_1" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td>
            <td><img src="images/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
            <!--<td><img src="icon/move.png" name="move1" width="16" height="16" id="move1" class="move"></td>-->
            </tr>


        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Tot. Gen.</td>
            <td><input type="text" name="totale" class="t2" id="totale" size="7" value="" placeholder="0.00" readonly></td>
        </tr>
        </tbody>
    </table>

mentre lato javascript ho aggiunto questo:

codice:

<!-- SCRIPT SPOSTAMENTO DINAMICO ROW TABLE -->
<script type="text/javascript">
var row;
function start(){  
  row = event.target; 
}
function dragover(){
  var e = event;
  e.preventDefault(); 
  
  let children= Array.from(e.target.parentNode.parentNode.children);
  
  if(children.indexOf(e.target.parentNode)>children.indexOf(row))
    e.target.parentNode.after(row);
  else
    e.target.parentNode.before(row);
}
</script>

Con questa implementazione si presentano 3 problemi:
1) L'utente quando sposta la cella deve cliccare su un punto bianco qualsiasi (non avendo nessuna icona maniglia) se aggiungo la maniglia non si spostano le righe ma si sposta l'icona della maniglia;

2) Lo spostamento è abbastanza semplice e funzionale utilizzando google chrome (ovvero se l'utente cliccando su un punto bianco dello schermo e muove il mouse verso l'altro o il basso funziona, deve prestare attenzione a non spostarsi verso sinistra o destra altrimenti si sballa la tabella;

3) La stessa identica implemantazione con browser firefox sballa completamente la tabella in fase di spostamento.

**ninja72** · 31-01-2023, 16:51

Penso che sortableJs faccia al caso tuo, ho sistemato leggermente il codice vedi se va bene per le tue esigenze.

codice:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
    }

    #title-tot {
      text-align: right;
    }

    .ghost {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="container">
    <table id="commessa">
      <thead>
        <tr>
          <td>Intervento</td>
          <td>Fornitore</td>
          <td>Q.t&agrave;</td>
          <td>Unitario</td>
          <td>Sconto %</td>
          <td>Totale</td>
        </tr>
      </thead>
      <tbody id="items">
        <tr class="righe">
          <td><input type="text" name="itr1" id="itr1" class="t1" size="30" placeholder="Max 49 caratteri"
              maxlength="49" required></td>
          <td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
          <td><input type="text" name="q1" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0"
              placeholder="0" required></td>
          <td><input type="text" name="iu1" class="t2 somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="6"
              value="0.0" placeholder="0.00" autocomplete="off"></td>
          <td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0"
              placeholder="sconto" autocomplete="off"></td>
          <td><input type="text" name="imp_1" id="imp_1" class="t2 somma" size="8" value="0.0" placeholder="0.00"
              readonly></td>
        </tr>

      </tbody>
      <tfoot>
        <tr>
          <td id="title-tot" colspan="5">Tot. Gen.</td>
          <td><input type="text" name="totale" class="t2" id="totale" size="8" value="" placeholder="0.00" readonly>
          </td>
        </tr>
      </tfoot>
    </table>
    <div id="controls">
      <button id="add" title="aggiungi riga">+</button> <button id="remove" title="rimuovi ultima riga">-</button>
    </div>
  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'
    integrity='sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=='
    crossorigin='anonymous'></script>
  <script src=" https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js "></script>
  <script>
    $(document).ready(function () {
      var regex = /^(.*)(\d)+$/i;
      var cindex = 1;
      const totaleView = document.getElementById('totale')

      $('body').on('click', '#remove', function () {
        var childs = document.getElementById('items').children
        if (childs.length == 1) return
        let totale = 0
        document.getElementById('items').lastChild.remove()
        totaleView.value = ''
        cindex--;
        Array.from(childs).forEach(e => {
          totale += parseFloat(e.children[5].children[0].value)
        })
        totaleView.value = totale.toFixed(2)
      })

      $('body').on('click', '#add', function () {
        if (cindex <= 14) {
          cindex++;
          var row = document.createElement('tr')
          row.innerHTML = '<tr class="righe"><td><input type="text" name="itr' + cindex + '" id="itr' + cindex + '" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for' + cindex + '" id="for' + cindex + '" class="t1" size="10"></td><td><input type="text" name="q' + cindex + '" class="t2 somma" id="q' + cindex + '" size="3" value="0.0" onkeyup="SommaRiga(' + cindex + ')" placeholder="0"></td><td><input type="text" name="iu' + cindex + '" class="t2 somma"  onBlur="Format(' + cindex + ')" onkeyup="SommaRiga(' + cindex + ')" id="iu' + cindex + '" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc' + cindex + '" class="t2 somma" onkeyup="Virgola(' + cindex + ')" id="sc' + cindex + '" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_' + cindex + '" id="imp_' + cindex + '" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td></tr>'
          document.getElementById('items').appendChild(row)
          sort()
        } else {
          alert('Non puoi inserire più di 15 righe');
          return false;
        }
      }).on('focus', '.somma', function () {
        $(this).not('input[name^="imp_"]').val('')
      })
    });

    function sort() {
      var el = document.getElementById('items')
      new Sortable(el, {
        animation: 150,
        ghostClass: 'ghost'
      })
    }

    function Format(ele) {
      var valore = ($("#iu" + ele).val() * 1)
      $("#iu" + ele).val(valore.toFixed(2))
    }

    function Virgola(nele) {
      var cambia = $("#sc" + nele).val().replace(/\,/g, '.')
      $("#sc" + nele).val(cambia)
      SommaRiga(nele)
    }

    function SommaRiga(num) {
      var tot = 0
      var qt = $("#q" + num).val()
      var unitario = $("#iu" + num).val()
      var sc = $("#sc" + num).val()
      var Tot = (qt * 1 * unitario * 1)
      var impsc = (Tot / 100 * sc)
      var somma = (Tot - impsc)
      if (somma > 0) {
        $("#imp_" + num).val(somma.toFixed(2))
      } else {
        $("#imp_" + num).val('')
        $("#iu" + num).val('')
      }
      var elem = $('input[name^="imp_"]')
      for (i = 0; i < elem.length; i++) {
        tot += (elem.eq(i).val() * 1)
      };
      $("#totale").val(tot.toFixed(2))
    }

  </script>
</body>

</html>

**appsistem** · 01-02-2023, 12:39

Buongiorno,
anzitutto grazie per gli l'interventi in supporto alla mia richiesta.

Ho implementato il codice suggerito da @ninja72 ho constatato che nella pagina di inserimento commessa ora posso tranquillamente spostare le righe, anche se i tasti che permettono l'aggiunta di nuove righe si sono spostati in basso e non sono più accanto alla riga (ma questo per il momento è la cosa meno importante).

Vi faccio un esempio di quello che accade:

- Creo la commessa ipotizziamo di tre righe;
- per capirci immaginiamo che nella prima riga la descrizione sia riga 1 nella seconda riga2 nella terza riga 3;
- prendo le righe dopo averle compilate, le sposto in questo modo, la riga 3 la porto in cima, la riga 2 la porto alla fine la riga 1 la metto al centro.
- ora quando salvo la commessa e la passo al file che prima me la salva nel database e poi mi genera il pdf file che si chiama saveandpdf.php mi ritrovo lo scenario originale, ovvero quello del primo inserimento, in sostanza non considera le righe spostate:

Pertanto nell'anteprima di stampa viene fuori:
RIGA 1 --->
RIGA 2 --->
RIGA 3 --->

anziche
RIGA 3 --->
RIGA 2 --->
RIGA 1 --->

codice:

<?php

/* Recupero l'id dell'ultima commessa inserita */
$id_com = (int)$_GET['id_com'];

/* Recupero i dati della commessa inserita */
$sq1 = "SELECT * FROM commesse WHERE id_com = '$id_com'";
$rs1 = $mysqli->query($sq1);
$count = mysqli_num_rows($rs1);

/* Conto le righe per vedere se esiste la commessa */
if ($count == 0) {

echo "<p style='text-align:center;margin-top: 10%;'>Non esistono Commesse corrispondenti all'ID: $id</p>";

}else{

while ($row = $rs1->fetch_array(MYSQLI_ASSOC)) {
$id_com = mysqli_real_escape_string($mysqli, $row['id_com']);
$cliente = mysqli_real_escape_string($mysqli, $row['cliente']);
$data = mysqli_real_escape_string($mysqli, $row['data']);
//$ora = mysqli_real_escape_string($mysqli, $row['ora']);
$indirizzo = mysqli_real_escape_string($mysqli, $row['indirizzo']);
$veicolo = mysqli_real_escape_string($mysqli, $row['veicolo']);
$piva = mysqli_real_escape_string($mysqli, $row['piva']);
$tel = mysqli_real_escape_string($mysqli, $row['tel']);
$targa = mysqli_real_escape_string($mysqli, $row['targa']);
$telaio = mysqli_real_escape_string($mysqli, $row['telaio']);
$km = mysqli_real_escape_string($mysqli, $row['km']);
$n_tecnico = mysqli_real_escape_string($mysqli, $row['n_tecnico']);
$pagamento = mysqli_real_escape_string($mysqli, $row['pagamento']);
//$note = mysqli_real_escape_string($mysqli, $row['note']);
$allegato = mysqli_real_escape_string($mysqli, $row['allegato']);
$totale = mysqli_real_escape_string($mysqli, $row['totale']);

/* FILTRI e CONVERSIONI SULLE VARIABILI POST */
$cliente = trim(strip_tags(stripslashes($cliente)));
$indirizzo = trim(strip_tags(stripslashes($indirizzo)));
$pagamento = trim(strip_tags(stripslashes($pagamento)));
$veicolo = trim(strip_tags(stripslashes($veicolo)));
$n_tecnico = trim(strip_tags(stripslashes($n_tecnico)));
$data = strtotime($data);
$data = date('d/m/Y', $data);
/* FINE FILTRI e CONVERSIONI SULLE VARIABILI POST */

$itr1 = mysqli_real_escape_string($mysqli, $row['itr1']);
$itr2 = mysqli_real_escape_string($mysqli, $row['itr2']);
$itr3 = mysqli_real_escape_string($mysqli, $row['itr3']);
$itr4 = mysqli_real_escape_string($mysqli, $row['itr4']);
$itr5 = mysqli_real_escape_string($mysqli, $row['itr5']);
ecc.ecc.

$for1 = mysqli_real_escape_string($mysqli, $row['for1']);
$for2 = mysqli_real_escape_string($mysqli, $row['for2']);
$for3 = mysqli_real_escape_string($mysqli, $row['for3']);
$for4 = mysqli_real_escape_string($mysqli, $row['for4']);
$for5 = mysqli_real_escape_string($mysqli, $row['for5']);
ecc.ecc

$itr1 = trim(strip_tags(stripslashes($itr1)));
$itr2 = trim(strip_tags(stripslashes($itr2)));
$itr3 = trim(strip_tags(stripslashes($itr3)));
$itr4 = trim(strip_tags(stripslashes($itr4)));
$itr5 = trim(strip_tags(stripslashes($itr5)));
ecc. ecc.

$for1 = trim(strip_tags(stripslashes($for1)));
$for2 = trim(strip_tags(stripslashes($for2)));
$for3 = trim(strip_tags(stripslashes($for3)));
$for4 = trim(strip_tags(stripslashes($for4)));
$for5 = trim(strip_tags(stripslashes($for5)));
ecc.ecc

$q1 = mysqli_real_escape_string($mysqli, $row['q1']);
$q2 = mysqli_real_escape_string($mysqli, $row['q2']);
$q3 = mysqli_real_escape_string($mysqli, $row['q3']);
$q4 = mysqli_real_escape_string($mysqli, $row['q4']);
$q5 = mysqli_real_escape_string($mysqli, $row['q5']);
ecc. ecc.

$iu1 = mysqli_real_escape_string($mysqli, $row['iu1']);
$iu2 = mysqli_real_escape_string($mysqli, $row['iu2']);
$iu3 = mysqli_real_escape_string($mysqli, $row['iu3']);
$iu4 = mysqli_real_escape_string($mysqli, $row['iu4']);
$iu5 = mysqli_real_escape_string($mysqli, $row['iu5']);
ecc. ecc.

$sc1 = mysqli_real_escape_string($mysqli, $row['sc1']);
$sc2 = mysqli_real_escape_string($mysqli, $row['sc2']);
$sc3 = mysqli_real_escape_string($mysqli, $row['sc3']);
$sc4 = mysqli_real_escape_string($mysqli, $row['sc4']);
$sc5 = mysqli_real_escape_string($mysqli, $row['sc5']);
ecc. ecc.

$imp_1 = mysqli_real_escape_string($mysqli, $row['imp_1']);
$imp_2 = mysqli_real_escape_string($mysqli, $row['imp_2']);
$imp_3 = mysqli_real_escape_string($mysqli, $row['imp_3']);
$imp_4 = mysqli_real_escape_string($mysqli, $row['imp_4']);
$imp_5 = mysqli_real_escape_string($mysqli, $row['imp_5']);
ecc. ecc.

 }
}

?>

<div class="card-commesse">
  <div class="card-header">Interventi Manutenzione Veicolo</div>
  <div class="card-block">

    <table id="commessa">
        <tbody>
        <tr>
            <td>Intervento</td>
            <td>Fornitore</td>
            <td>Q.t&agrave;</td>
            <td>Unitario</td>
            <td>Sconto %</td>
            <td>Totale</td>
        </tr>
        
            
            <? if ($itr1 != '') { ?>
            <tr class="righe">
             <td><input type="text" name="itr1" id="itr1"  class="t1" size="30" maxlength="49" value="<?= $itr1 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="for1" id="for1" class="t1" size="10" value="<?=  $for1 ?>" readonly="readonly"></td>
             <td><input type="text" name="q1" id="q1" class="t2 somma"  onKeyUp="SommaRiga(1)" size="3" value="<?= $q1 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="iu1" id="iu1" class="t2 somma" onKeyUp="SommaRiga(1)"  onBlur="Format(1)" size="6" value="<?= $iu1 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="sc1" id="sc1" class="t2 somma" onKeyUp="Virgola(1)"   size="8" value="<?= $sc1 ?>" readonly="readonly"></td>
             <td><input type="text" name="imp_1" id="imp_1"  class="t2 somma" size="8" value="<?= $imp_1 ?>"  readonly="readonly"></td>
            </tr>
            <? } ?>

            <? if ($itr2 != '') { ?>
            <tr class="righe">
             <td><input type="text" name="itr2" id="itr2"  class="t1" size="30" maxlength="49" value="<?= $itr2 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="for2" id="for2" class="t1" size="10" value="<?=  $for2 ?>" readonly="readonly"></td>
             <td><input type="text" name="q2" id="q2" class="t2 somma"  onKeyUp="SommaRiga(1)" size="3" value="<?= $q2 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="iu2" id="iu2" class="t2 somma" onKeyUp="SommaRiga(1)"  onBlur="Format(1)" size="6" value="<?= $iu2 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="sc2" id="sc2" class="t2 somma" onKeyUp="Virgola(1)"   size="8" value="<?= $sc2 ?>" readonly="readonly"></td>
             <td><input type="text" name="imp_2" id="imp_2"  class="t2 somma" size="8" value="<?= $imp_2 ?>"  readonly="readonly"></td>
            </tr>
            <? } ?>
    
            <? if ($itr3 != '') { ?>
            <tr class="righe">
             <td><input type="text" name="itr3" id="itr3"  class="t1" size="30" maxlength="49" value="<?= $itr3 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="for3" id="for3" class="t1" size="10" value="<?=  $for3 ?>" readonly="readonly"></td>
             <td><input type="text" name="q3" id="q3" class="t2 somma"  onKeyUp="SommaRiga(1)" size="3" value="<?= $q3 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="iu3" id="iu3" class="t2 somma" onKeyUp="SommaRiga(1)"  onBlur="Format(1)" size="6" value="<?= $iu3 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="sc3" id="sc3" class="t2 somma" onKeyUp="Virgola(1)"   size="8" value="<?= $sc3 ?>" readonly="readonly"></td>
             <td><input type="text" name="imp_3" id="imp_3"  class="t2 somma" size="8" value="<?= $imp_3 ?>"  readonly="readonly"></td>
            </tr>
            <? } ?>
            
            <? if ($itr4 != '') { ?>
            <tr class="righe">
             <td><input type="text" name="itr4" id="itr4"  class="t1" size="30" maxlength="49" value="<?= $itr4 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="for4" id="for4" class="t1" size="10" value="<?=  $for4 ?>" readonly="readonly"></td>
             <td><input type="text" name="q4" id="q4" class="t2 somma"  onKeyUp="SommaRiga(1)" size="3" value="<?= $q4 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="iu4" id="iu4" class="t2 somma" onKeyUp="SommaRiga(1)"  onBlur="Format(1)" size="6" value="<?= $iu4 ?>"  readonly="readonly"></td>
            <td><input  type="text" name="sc4" id="sc4" class="t2 somma" onKeyUp="Virgola(1)"   size="8" value="<?= $sc4 ?>" readonly="readonly"></td>
             <td><input type="text" name="imp_4" id="imp_4"  class="t2 somma" size="8" value="<?= $imp_4 ?>"  readonly="readonly"></td>
            </tr>
            <? } ?>
ecc. ecc.

<div class="text-right">
        <button type="submit" name="submit" class="btn btn-success right">Stampa Commessa</button> 
    </div>
      
</div><!--Close Form Container-->
</form><!--Close Form-->

**ninja72** · 01-02-2023, 13:49

Per quanto riguarda l'allineamento dei pulsanti di aggiunta e rimozione (ultima riga) forse non è stato riportato fedelmente il codice indicato.
La scelta di optare per l'eliminazione del tasto "add" per ogni riga mi sembra abbastanza intuitivo, ovvero, visto che solo il tasto dell'ultima riga poteva inserire una nuova riga, in caso di spostamenti dovevamo ricordare quale fosse l'ultima riga aggiunta, abilitata per l'inserimento di una nuova riga.
Sul problema relativo alla stampa, bisogna analizzare la logica di funzionamento dell'inserimento della commessa, comunque questa parte sembra più un problema relativo alla parte backend (php) e dunque si rischia di andare Off-Topic.

**appsistem** · 01-02-2023, 16:01

Originariamente inviata da ninja72

Per quanto riguarda l'allineamento dei pulsanti di aggiunta e rimozione (ultima riga) forse non è stato riportato fedelmente il codice indicato.
La scelta di optare per l'eliminazione del tasto "add" per ogni riga mi sembra abbastanza intuitivo, ovvero, visto che solo il tasto dell'ultima riga poteva inserire una nuova riga, in caso di spostamenti dovevamo ricordare quale fosse l'ultima riga aggiunta, abilitata per l'inserimento di una nuova riga.
Sul problema relativo alla stampa, bisogna analizzare la logica di funzionamento dell'inserimento della commessa, comunque questa parte sembra più un problema relativo alla parte backend (php) e dunque si rischia di andare Off-Topic.

Ciao @ninja, assolutamente chiara ed esaustiva la tua risposta, onde evitare di dover aprire un nuovo post, vorrei chiedere ai moderatori (anche se non so esattamente come funziona) di spostare magari il post nella sezione php o quella che ritengono più opportuna per ricevere un supporto da parte di qualche utente "anima pia" che possa prendere a cuore e supportare la mia richiesta.

Ultimo mio pensiero è rischiare di andare off-topic, tendenzialmente cerco sempre di rispettare (come immagino sia corretto) le regole dei forum.

Un doveroso ed ulteriore grazie per il tuo supporto che ritengo esser stato preziosissimo. Per quel che riguarda il posizionamento dei pultanti, ho cercato di seguire le informazioni fornite, ma probabilmente avendo tante pagine ed una struttura del gestionale non propriamente corretta, ma decisamente "arrangiata" da me come appassionato ed affascinato dal mondo della programmazione.

Discussione: Spostare dinamicamente delle righe statiche

Strumenti discussione

Ricerca discussione

Visualizza

Spostare dinamicamente delle righe statiche

Tag per questa discussione

Permessi di invio