Discussion :

[Freeman213]

Bonjour,
Avant toute chose je tiens à vous remercier de votre aide.
Je fais appel à vous parce que le JS n'est pas mon langage de prédilection.
On m'a transmit un script qui remplit bien sa fonction mais (parce qu'il a toujours un mais) il manque une fonction dans celui-ci.

Ce script transforme des données excel (collé dans un textarea) en tableau html.

JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function createTableSku() {
 
    // Get the data
	var excelData = document.getElementById('sku').value;
 
    // split into rows
    excelRow = excelData.split(String.fromCharCode(10));
 
    // split rows into columns
    for (i=0; i<excelRow.length; i++) {
        excelRow[i] = excelRow[i].split(String.fromCharCode(9));
 
    }
 
	// start to create the HTML table
	var myTable = document.createElement("table");
	var myTbody = document.createElement("tbody");
 
	// Loop over the rows
    for (i=0; i<excelRow.length - 1; i++) {
 
		// create a row in the HTML table
		var myRow = document.createElement("tr");
 
		// Loop over the columns and add TD to the TR
		for (j=0; j<excelRow[i].length; j++) {
			// Loop over the row columns
			if (excelRow[i][j].length != 0) {
					var input = document.createElement("input");
					input.className = "required-entry input-text";
					input.value = excelRow[i][j];
					input.setAttribute('id',"sku_"+i);
					input.setAttribute('name',"sku[]");
            }			
			myRow.appendChild(input);			
		}
		myTbody.appendChild(myRow);	
	}
		myTable.appendChild(myTbody);
 
    document.body.appendChild(myTable);
	// console.log(myTable)
}

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<textarea id="sku" placeholder="sku" style="width: 300px; height: 100px;"></textarea><br/>
<input type="button" value="sku" onclick="createTableSku()" >

Son job est de créer un tableau HTML, ce qui fait très bien, mais il faut qu'il donne un autre ID "setAttribute('id',"sku_"+i);" à la deuxième colonne "td" du tableau.

Exemple du résultat escompté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr><input class="required-entry input-text" id="sku_0" name="sku[]"><input class="required-entry input-text" id="qty_0" name="qty[]"></tr>

Nous utilisons que deux colonnes excel.

Encore merci de votre aide.

Salutations Freeman213

[sekaijin]

où est le document.createElement("td");qui crée les colonnes ?

A+JYT

[Freeman213]

Merci de votre réponse.
il devrait être sous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (excelRow[i][j].length != 0) {

mais le script fonction sans.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var input = document.createElement("input");

se place dans des balise <td></td> lors de son exécution.

Salutations

[sekaijin]

ce n'est pas top que de créer un tableau avec des lignes sans colonnes

le navigateur va toujours tenter d'afficher quelque chose
mais ce n'est jamais garanti si ce n'est pas conforme.

je pense que la première chose à faire est de créer des cellule et y mettre les imputs.
du coup lorsque tu créer les cellules tu peux créer des id "td_"+ i + "_" + j

tu auras alors des idi différent pour chaque cellules

A+JYT

[Watilin]

Bonsoir Freeman213,

Quelques remarques en vrac.

• Le DOM a des méthodes standard et depuis longtemps bien implémentées pour créer des rangs et des cellules de tableaux : insertRow et insertCell.
  
• Les valeurs '\t' et '\n' sont à la fois plus lisibles et plus efficaces que String.fromCharCode(9) et String.fromCharCode(10), respectivement. Pourquoi s'en priver ?
  
• La variable excelRow est maladroitement nommée puisqu'elle laisse entendre que son contenu est une ligne de tableau, alors qu'elle contient le tableau tout entier. Il faudrait plutôt la nommer excelTable.
  
• Il y a moyen de simplifier le code en retirant une boucle for. En effet, on peut utiliser la même boucle pour les opérations de découpage (« split rows into colums ») et de création de lignes (« Loop over the rows »).
  
• On a rarement besoin de setAttribute. Tu peux utiliser input.id et input.name directement.

[Freeman213]

Merci pour vos réponses et conseils !

j'ai modifié mon script selon vos conseils et voici ce que ça donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function createTableSku() {
 
    // Get the data
	var excelData = document.getElementById('sku').value;
 
    // split into rows
    excelTable = excelData.split('\n');
 
    // split rows into columns
    for (i=0; i<excelTable.length; i++) {
        excelTable[i] = excelTable[i].split('\t');
 
    }
 
	// start to create the HTML table
	var myTable = document.createElement("table");
	var myTbody = document.createElement("tbody");
 
	// Loop over the rows
    for (i=0; i<excelTable.length - 1; i++) {
 
		// create a row in the HTML table
		var myRow = document.createElement("tr");
 
		// Loop over the columns and add TD to the TR
		for (j=0; j<excelTable[i].length; j++) {
			// Loop over the row columns
			if (excelTable[i][j].length != 0) {
					var excelCell = document.createElement("td");
					excelCell.id = ("excelCell");
					var input = document.createElement("input");
					input.className = ("required-entry input-text");
					input.value = excelTable[i][j];
					input.id = ("sku_"+i);
					input.name = ("sku[]");
                         }
			excelCell.appendChild(input);	
			myRow.appendChild(excelCell);			
		}
		myTbody.appendChild(myRow);	
	}
		myTable.appendChild(myTbody);
 
    document.body.appendChild(myTable);
	// console.log(myTable)
}

Le problème, c'est que le champ input doit avoir l'id "une fois sur deux" et non la balise <td>

Salutations

Freeman213

[Freeman213]

Bonjour,
j'ai trouvé la solution en copiant les données de la première fonction dans une autre et en retravaillant les valeurs d'après le résultat escompté.

Merci pour votre aide.

Salutations

Freeman213