appendChild à plusieurs class

Sujet résolu

11 janvier 2021 à 17:20:56

Bonjoir,

Je suis entrain de concevoir un programme dans lequel on a un tableau avec 1 colonne et 2 lignes. Si j'appuie sur le + du bas ça m'ajoute une ligne et si j'appuie dur le + de droite ça m'ajoute un colonne entière. Tout ceci me pose problème car je n'arrive pas à utilisé un appendChild pour plusieurs class afin que chacune de mes lignes soit remplie avec le même nombre de colonne... Voici mon code, j'espère avoir été assez clair :

var nbColonne = 1;
var nbLine = 2;

function addLine() 
{
	let emplacement = document.getElementById("tbody");
	const tr = document.createElement("tr");

	for (let i = 0; i < nbColonne; i++) 
	{
		const td = document.createElement("td");
		const textarea = document.createElement("textarea");
		textarea.rows = "1";
		textarea.cols = "30";
		tr.appendChild(td)
		td.appendChild(textarea);
	}
	emplacement.appendChild(tr);
}

function addRow()
{
	for (let i = 0; i < nbLine; i++)
	{
		let body = document.getElementsByClassName("body");
		const td = document.createElement("td");

		body[i].appendChild(td);
		nbLine++;
	}
	nbColonne++;
}

ET l'HTML :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="Tableau.css">
	<title>Document</title>
</head>
<body>
	<div class="flex column">
		<div class="flex">
			<table>
				<thead>
					<tr class="head">
						<th><textarea cols="30" rows="1"></textarea></th>
					</tr>
				</thead>
				<tbody id="tbody">
					<tr class="body">
						<td><textarea cols="30" rows="1"></textarea></td>
					</tr>
				</tbody>
			</table>
			<h1 class="more" onclick="addRow()">+</h1>
		</div>
		<h1 class="more" onclick="addLine()">+</h1>
	</div>
	<script src="Tableau.js"></script>
</body>
</html>

Et si vous voulez le css dites moi ;).

Merci d'avance,

Maxence ABRILE

-
Edité par Maxence ABRILE 11 janvier 2021 à 17:21:24

Maxence ABRILE

13 janvier 2021 à 12:23:44

Bonjour je me permet de relancer le sujet car pas de réponses... Mais j’ai travail toujours et j’espère y arriver.

NadfriJS

13 janvier 2021 à 13:59:33

Salut, regarde du coté de cet article, ca répond peut-etre à ta problématique:

https://www.redips.net/javascript/adding-table-rows-and-columns/#:~:text=After%20row%20is%20created%2C%20use,to%20click%20the%20buttons%20below%20%E2%80%A6&text=When%20you%20click%20the%20%E2%80%9CAdd,appendRow()%20function%20is%20called.

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

Maxence ABRILE

13 janvier 2021 à 14:53:18

En effet je suis arrivé à ce résultat :

var nbColonne = 1;
var nbLine = 1;

function addLine() 
{
	let emplacement = document.getElementById("tbody");
	const tr = document.createElement("tr");

	for (let i = 0; i < nbColonne; i++) 
	{
		const td = document.createElement("td");
		const textarea = document.createElement("textarea");
		textarea.rows = "1";
		textarea.cols = "30";
		tr.appendChild(td)
		td.appendChild(textarea);

	}
	tr.classList.add("body");
	emplacement.appendChild(tr);
}

function addRow()
{
	addTh();
	nbColonne++;
	for (let i = 0; i < nbLine; i++)
	{
		let body = document.getElementsByClassName("body");

		const td = document.createElement("td");

		const textareaTd = document.createElement("textarea");
		textareaTd.rows = "1";
		textareaTd.cols = "30";

		td.appendChild(textareaTd);
		body[i].appendChild(td);

		nbLine++;
	}
}
function addTh()
{
	const th = document.createElement("th");

	let head = document.getElementsByClassName("head");
	let textareaTh = document.createElement("textarea");
	textareaTh.rows = "1";
	textareaTh.cols = "30";
	th.appendChild(textareaTh);
	head[0].appendChild(th);
}