Buongiorno ho un problema da risolvere.
In una pagina ho una tabella dinamica generata da un form.
Funzona bene, ma devo poter editare le righe della tabella, dato che questa viene generatacon jquery append() ho pensato di cancellarla con detach() ma c'è un problema.
Il problema è che una volta creata la riga, il bottone che dovrebbe richiamare l'evento non lo trova in quanto non definito in origine.
Ora un po' di codice:
Spezzone di codice della tabella ed il pulsante che richiama la funzione in jquery/javascrit che genera la tabella
in <tbody> vengono attaccate le righe generate dalla funzione sotto
Poi le due funzioni in javascript, la prima è una arrow che cancella la riga richamata, la seconda più complessa, prende i valori dal form e li mette nella tabella.
Genera anche i nuovi valori per i campi da pagina a a pagina per comodità di chi inserisce i valori.
Ora come descritto su, il bottone generato alla fina di ogni riga, non vede la funzione di cancellazione deleteRiga() e non so come risolvere.
In una pagina ho una tabella dinamica generata da un form.
Funzona bene, ma devo poter editare le righe della tabella, dato che questa viene generatacon jquery append() ho pensato di cancellarla con detach() ma c'è un problema.
Il problema è che una volta creata la riga, il bottone che dovrebbe richiamare l'evento non lo trova in quanto non definito in origine.
Ora un po' di codice:
Spezzone di codice della tabella ed il pulsante che richiama la funzione in jquery/javascrit che genera la tabella
HTML:
-------------------------------- SNIP ---------------------------------
<button tabindex="6" type="button" class="w3-button w3-green" id="inserisci-voce">
<span class=" fa fa-list-ol" aria-hidden="true"></span>
INSERISCI RIGA NEL MENÙ
</button>
-------------------------------- SNIP ---------------------------------
<div class="w3-responsive">
<h3>Procura della Repubblica presso il Tribunale di Udine</h3>
<p>Fascicolo numero <strong id="numero-fascicolo"></strong></p>
<table class="w3-table w3-striped">
<thead>
<tr class="w3-black">
<th> </th>
<th>#</th>
<th>Voce</th>
<th class="w3-center">Da pagina</th>
<th class="w3-center">A pagina</th>
<th> </th>
</tr>
</thead>
<tbody id="mostra-indice"></tbody>
<tfoot>
<tr>
<td colspan="6">* se manca il numero, vuol dire che la voce è formata da una sola pagina.</td>
</tr>
</tfoot>
</table>
</div>Poi le due funzioni in javascript, la prima è una arrow che cancella la riga richamata, la seconda più complessa, prende i valori dal form e li mette nella tabella.
Genera anche i nuovi valori per i campi da pagina a a pagina per comodità di chi inserisce i valori.
JavaScript:
// Cancella una riga dalla tabella
var deleteRiga = (identity) => {
var riga = '#riga-' + identity;
$( riga ).detach();
};
var index = 1; // Numero di riga per la tabella
$('#inserisci-voce').click(function(){
var voce = $('#voce'); // Voce del menù
var dal = $('#dal-numero'); // Primo numero di pagina
var al = $('#al-numero'); // Ultimo numero di pagina
var primoNumero = dal.val(); // Valore predefinito per il primo numero.
var secondoNumero = '*'; // Valore predefinito per l'ultimo numero.
var Fascicolo = '';
if ($('#numero').val() != '')
Fascicolo = $('#numero').val();
if ($('#anno').val() != '')
Fascicolo = Fascicolo + ' / ' + $('#anno').val();
if (Fascicolo != '')
$('#numero-fascicolo').text( '000' + Fascicolo );
// Inserisco i valori (se presenti) nei text box e aggiunge la riga alla tabella.
if (voce.val() != '' && dal.val() != '') {
// Se c'è un ultimo numero, lo sostituisco ai tre trattini.
if (al.val() != '') secondoNumero = al.val();
// Crea la riga da stampare
var riga = '<tr id="riga-' + index + '"><td> </td>';
riga += '<td><p>' + index + '</p></td>';
riga += '<td><p contenteditable="true">' + voce.val() + '</p></td>';
riga += '<td class="w3-center"><p contenteditable="true">' + dal.val() + '</p></td>';
riga += '<td class="w3-center"><p contenteditable="true">' + secondoNumero + '</p></td>';
riga += '<td class="w3-center"><button type="button" class="w3-button w3-red noprint" title="Cancella la riga" onclick="deleteRiga(' + index + ')"><span class="fa fa-close noprint" aria-hidden="true"></span></button></td></tr>';
$("#mostra-indice").append( riga );
// Aggiusta alcune cose
// Abilita il tasto di stampa se c'è almeno una riga
$('#stampa').prop('disabled', false);
// Aggiusta i numeri in funzione della pagina precedente.
if (al.val() == '') {
// Manca il numero della pagina finale.
primoNumero++; // Aggiungo + 1 al primo numero.
secondoNumero = '';
}
else {
// C'è un valore per il secondo numero.
secondoNumero++; // Aggiungo 1 all'ultimo numero.
primoNumero = secondoNumero; // il primo numero assume il valore del secondo + 1
secondoNumero = primoNumero + 1; // Aggiungo ancora 1 all'ultimo numero.
}
// Inserisco i valori nel text box dei numeri dal --> al
dal.val( primoNumero ); // Inserisco il primo numero aumentato di 1
al.val( secondoNumero ); // Inserisco il secondo numero se presente + 1 o niente.
// Torna su alla voce di menù per ricominciare a scriverne un'altra. (cancella la precedente!)
$('#voce').val( '' ).focus();
index++;
}
else
// Blocca il tasto di stampa se la tabella è vuota.
$('#stampa').prop('disabled', true);
});Ora come descritto su, il bottone generato alla fina di ogni riga, non vede la funzione di cancellazione deleteRiga() e non so come risolvere.
