Tabella "particolare" da Esportare in CSV

ricmanx

il 24 gen 2023, 15:01

7 risposte

ricmanx

Pochi posts

Iscritto da: gen, 2023

Messaggi:: 4

Tabella "particolare" da Esportare in CSV

24 gen 2023, 15:17

Ciao a tutti, ho una tabella da esportare in CSV. In rete ho trovato uno script che lo fa (ce ne sono tanti).

Solo che la tabella “non è normale”… è popolata da valori dati e restituiti in javascript (sono delle semplici somme di numeri presi da altri campi). Il problema è che quando esporto il contenuto della cella che, apparentemente è un numero, in realtà è “codice” … e questo mi va a finire nel CSV.

Ho creato una pagina dimostrativa per aiutarvi “ad aiutarmi”… :)

http://ricmanx.great-site.net/test/

Grazie a chi ci capisce qualcosa!!

7 Risposte

Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3079
Re: Tabella "particolare" da Esportare in CSV
25 gen 2023, 09:32
24/01/2023 - ricmanx ha scritto:
Ciao a tutti, ho una tabella da esportare in CSV. In rete ho trovato uno script che lo fa (ce ne sono tanti).
Il fatto che tu abbia trovato uno script già pronto è cosa buona, però andrebbe utilizzato come spunto e si dovrebbe comprendere come funziona per poterlo utilizzare nel modo corretto.
24/01/2023 - ricmanx ha scritto:
Il problema è che quando esporto il contenuto della cella che, apparentemente è un numero, in realtà è “codice” … e questo mi va a finire nel CSV.
Non è codice, bensì la rappresentazione dell'elemento HTML <input> che si trova all'interno della cella dalla quale lo script si aspetterebbe di estrarre il valore dal testo.
Esamina questa porzione di codice:
```
                // Variable to store the final csv data
				var csv_data = [];

				// Get each row data
				var rows = document.getElementsByTagName('tr');
				for (var i = 0; i < rows.length; i++) {

					// Get each column data
					var cols = rows[i].querySelectorAll('td,th');

					// Stores each csv row data
					var csvrow = [];
					for (var j = 0; j < cols.length; j++) {

						// Get the text data of each cell
						// of a row and push it to csvrow
						csvrow.push(cols[j].innerHTML);
					}

					// Combine each column value with comma
					csv_data.push(csvrow.join(","));
				}
```
Si vede chiaramente che rows e cols sono rispettivamente le righe (<tr>) e le celle (<td> o <th>) da cui vengono estratti i valori, accedendo alla proprietà innerHTML che dovrebbe contenere il valore specifico da inserire nel file (un nome di campo in caso di <th>, il valore della cella in caso di <td>).
Nelle celle della tua tabella non ci sono valori, ma campi di input con dentro il valore:
```
        <table class="tab_valori">
			<tr>
				<th>VALORI</th>
			</tr>			
			<tr>
				<td class="pf"> <input id="sric11"  type="text" class="campinum" readonly > </td>
			</tr>
		</table>		
```
E' quindi evidente che tu debba alternativamente scegliere una strada:
1. eliminare l'elemento <input> dalla tabella e riportare solo il valore dentro la tabella, lasciando invariato lo script;
2. sostituire nello script la lettura diretta di innerHTML con due istruzioni per recuperare l'input che si trova nella cella, e poi il rispettivo valore che esso contiene.
R
ricmanx
Pochi posts
Iscritto da
gen, 2023
Messaggi:
4
Re: Tabella "particolare" da Esportare in CSV
25 gen 2023, 11:10
25/01/2023 - Alka ha scritto:
<table class="tab_valori"> <tr> <th>VALORI</th> </tr> <tr> <td class="pf"> <input id="sric11" type="text" class="campinum" readonly > </td> </tr> </table>
E' quindi evidente che tu debba alternativamente scegliere una strada:
eliminare l'elemento <input> dalla tabella e riportare solo il valore dentro la tabella, lasciando invariato lo script;
sostituire nello script la lettura diretta di innerHTML con due istruzioni per recuperare l'input che si trova nella cella, e poi il rispettivo valore che esso contiene.
Quindi per provare il tuo suggerimento “1” stavo tentando di togliere tutto il codice dell'<input> solo nella tabella VALORI, ovviamente, tanto in effetti non serve… Lo volevo trasformare così:
```
<td class="pf" id="sric11"></td>
```
MA ovviamente mi sbagliavo… :(
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3079
Re: Tabella "particolare" da Esportare in CSV
25 gen 2023, 14:36
25/01/2023 - ricmanx ha scritto:
Quindi per provare il tuo suggerimento “1” stavo tentando di togliere tutto il codice dell'<input> solo nella tabella VALORI, ovviamente, tanto in effetti non serve… Lo volevo trasformare così:
<td class="pf" id="sric11"></td>
MA ovviamente mi sbagliavo… :(
Cioè? Cosa vuoi dire? Qual è il problema?
Mi pare che nel codice sopra manchi il numero all'interno della cella, ma non vedendo né codice né altro non si possono fare molte ipotesi.
R
ricmanx
Pochi posts
Iscritto da
gen, 2023
Messaggi:
4
Re: Tabella "particolare" da Esportare in CSV
25 gen 2023, 16:30
Il codice completo lo trovi nel link che avevo lasciato all'inizio.
Comunque intendevo dire che nella tabella per visualizzare i valori (quindi il numero) volevo cambiare da così
```
<td class="pf"> <input id="sric11"  type="text" class="campinum" readonly > </td>
```
a così
```
<td class="pf" id="sric11"></td>
```
Perchè avevo inteso che il codice “<input ….etc…> veniva riportato nel csv. Quindi se l'id ”sric11" lo associo al TD anzichè nell'input il numero verrà (anzi pensavo che venisse) direttamente all'interno del TD stesso…
E purtroppo questo non funziona…
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3079
Re: Tabella "particolare" da Esportare in CSV
25 gen 2023, 17:51
25/01/2023 - ricmanx ha scritto:
Quindi se l'id ”sric11" lo associo al TD anzichè nell'input il numero verrà (anzi pensavo che venisse) direttamente all'interno del TD stesso…
Chiaramente, come lo script usa innerHTML (o innerText, se vuoi) per estrarre il valore che c'è all'interno della cella, devi usare la stessa proprietà per scrivercelo (la proprietà value non funziona, vale solo per i campi di input e altri controlli).
Controlla la parte di codice che mette il valore all'interno della cella della tabella e modificalo opportunamente.
R
ricmanx
Pochi posts
Iscritto da
gen, 2023
Messaggi:
4
Re: Tabella "particolare" da Esportare in CSV
27 gen 2023, 15:32
Non capisco bene chi sta inviando il valore…. Nel mio campo Input non c'era nessun Value … ma solo l'ID…
Il JS è così: un prima parte serve nella prima schermata ad aumentare di uno il numero dentro al campo input ogni volta che lo clicco:
```
$('#rric11').live({ click: function(){ var num = $(this).val(); $(this).val(num*1+1); }});
```
…e questo è il codice del campo Input
```
<td> <input id="rric11" type="text" class="campinum pf" value="0" readonly > </td>
```
La seconda parte serve a leggere il valore del campo input visto sopra per poi trascriverlo nella tabella
```
$('#go_stats').live({ 
	click: function(){
	 // Trascrivo i valori da pagina Rilevazione a pagina Stats
	 $('#sric11').val($('#rric11').val()); 
}
});
```
… e qui ti mostro la tabella originale dove si vede che il “value” neanche c'è, perchè lavora tutto sull'ID:
```
<table class="tab_valori">
  <tr>
     <th>VALORI</th>
  </tr>   
  <tr>
     <td class="pf"> <input id="sric11"  type="text" class="campinum" readonly > </td>
  </tr>
 </table> 
```
Ora in base a ciò che mi ha detto sto provando a modificare l'html in questo modo….
```
<td class="pf" id="sric11"></td>
```
e il relativo JS, leggendo una guida, avevo pensato di modificarlo da così
```
$('#sric11').val($('#rric11').val()); 
```
a così
```
let text = document.getElementById("sric11").innerText;
document.getElementById("rric11").innerHTML = text;
```
MA …. naturalmente …. non funziona :( non succede niente…
Cosaltro potrei modificare?
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3079
Re: Tabella "particolare" da Esportare in CSV
28 gen 2023, 11:27
27/01/2023 - ricmanx ha scritto:
Cosaltro potrei modificare?
Direi che puoi tornare alla mia prima risposta e provare ad applicare la soluzione 2), al posto della 1).
L'elemento <input> non si può eliminare se i valori si trovano al loro interno e quei controlli vengono utilizzati per modificare di conseguenza il valore stesso.
Devi quindi modificare la logica di esportazione in CSV affinché invece di innerHTML vada a cercare invece il campo <input> all'interno della cella, ottenendo il valore contenuto tramite val().

Devi accedere o registrarti per scrivere nel forum

7 risposte