Attribution d'un "ID" selon la colonne

Version imprimable

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:

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:

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:

<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

17/09/2014, 16h07
sekaijin

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

A+JYT
17/09/2014, 16h33
Freeman213

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

Code:

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

mais le script fonction sans.

Code:

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

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

Salutations
17/09/2014, 20h12
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
17/09/2014, 22h02
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.

Merci pour vos réponses et conseils ! :)

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

Code:

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

19/09/2014, 14h18
Freeman213

Bonjour,
j'ai trouvé la solution :P 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