Discussion :

[apt]

Bonjour à tous,

J'aimerais remplir, dans une page HTML, un tableau avec des données existantes.

Ce tableau se compose de quatre lignes et 4 colonnes.

Seulement, dans ce tableau, la deuxième et la quatrième ligne, on devra créer par le code suivant, une cellule composée de trois cases (td colspan=3).

Ce code parcourt un tableau intermédiaire, ou j'ai du mal à introduire une condition pour fusionner 3 cases dans une seule cellule.

Code HTML :

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
<table border="1">    <thead>
        <tr>
            <th class="ta-amwm" colspan="4" id="Titre">Calcul</th>
        </tr>
        <tr>
            <th class="ta-v25l" id="compteT">Compte</th>
            <th class="ta-v25l" id="codeT">Code</th>
            <th class="ta-v25l" id="calculT">Calcul</th>
            <th class="ta-v25l">R&eacute;sulat</th>
        </tr>
    </thead>
</table>
<script>
    var tab = [
        ["A", "B", "C", "D"],
        ["A1", "C1"],
        ["A2", "B2", "C2", "D2"],
        ["A3", "C3"],
    ];
    var nHTML = document.querySelector("table").innerHTML;
 
 
    tab.forEach(function (arrItem, i) {
        var td = "<tr>";
        arrItem.forEach(function (item, i1) {
            if (i % 2) {
                // Si la ligne 2 ou 4
                td += "<td colspan='3'>" + item + "</td>"; // créer une cellule de 3 cases
                td += "<td>" + item + "</td>"; // crééer une deuxieme cellule
                return; // passer à la ligne suivante
            }
            td += "<td>" + item + "</td>";
        });
        nHTML += td + "</tr>";
    });
    document.querySelector("table").innerHTML = nHTML;
</script>

Merci d'avance

[-Nikopol-]

je pense que ceci devrait faire l'affaire

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
let tab = [
        ["A", "B", "C", "D"],
        ["A1", "C1"],
        ["A2", "B2", "C2", "D2"],
        ["A3", "C3"],
    ];
    let nHTML = document.querySelector("table").innerHTML;
 
 
    tab.forEach(function (arrItem, i) {
        let td = "<tr>";
        if(i%2){
        arrItem.forEach(function (item, j) {
            if(j%2==0){
                td += "<td colspan='3'>" + item + "</td>";
            }else{
                td += "<td>" + item + "</td>";
            }
 
        });
        nHTML += td + "</tr>";
        }else{
            arrItem.forEach(function (item) {
                td += "<td>" + item + "</td>";
            })
            nHTML += td + "</tr>";
 
        }
    });
    document.querySelector("table").innerHTML = nHTML;

il te fallait 2 if et deux forEach

[apt]

Bonjour Nikopol,

Merci pour le code.

Je vois que if (i % 2) ne fonctionne pas comme if (j % 2 == 0) ?

Pour le code précédent, j'ai essayé ceci, et ça donne le même résultat (Je n'ai pas encore compris comment, il a marché ) :

Code HTML :

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
<table border="1">    <thead>
        <tr>
            <th class="ta-amwm" colspan="4" id="Titre">Calcul</th>
        </tr>
        <tr>
            <th class="ta-v25l" id="compteT">Compte</th>
            <th class="ta-v25l" id="codeT">Code</th>
            <th class="ta-v25l" id="calculT">Calcul</th>
            <th class="ta-v25l">R&eacute;sulat</th>
        </tr>
    </thead>
</table>
<script>
    var tab = [
        ["A", "B", "C", "D"],
        ["A1", "C1"],
        ["A2", "B2", "C2", "D2"],
        ["A3", "C3"],
    ];
    var nHTML = document.querySelector("table").innerHTML;
 
 
    tab.forEach(function (arrItem, i) {
        var td = "<tr>";
        arrItem.forEach(function (item, i1) {
            if (i % 2) {
                // Si la ligne 2 ou 4
                td += "<td colspan='3'>" + item + "</td>"; // créer une cellule de 3 cases
                return; // passer à la ligne suivante
            }
            td += "<td>" + item + "</td>";
        });
        nHTML += td + "</tr>";
    });
    document.querySelector("table").innerHTML = nHTML;
</script>

[javatwister]

Et en évitant de plaquer des bouts de html dans le script, ça donnerait ça, par exemple:

Code javascript :

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
    var tab = [
        ["A", "B", "C", "D"],
        ["A1", "C1"],
        ["A2", "B2", "C2", "D2"],
        ["A3", "C3"],
    ];
    const tb=document.querySelector("table").appendChild(document.createElement("tbody"));
 
    tab.forEach((v,i)=>{
        let tr=tb.appendChild(document.createElement("tr")),
		td=document.createElement("td"),
		cl;
		if (i%2) {
			cl=td.cloneNode();
			tr.appendChild(cl);
			cl.colSpan="3";
			cl.textContent=v[0];
			cl=td.cloneNode();
			tr.appendChild(cl);
			cl.textContent=v[1];
		}
		else{
			v.forEach(v2=>{		
				cl=td.cloneNode();
				tr.appendChild(cl);
				cl.textContent=v2;
			})
		}
	})

[apt]

Bonjour javatwister,

Merci pour le code.