Sujet Précédent Sujet Suivant

Améliorer un tableau

Résolu/Fermé
arthur - 1 avril 2019 à 17:08
 arthur - 4 avril 2019 à 12:22
Bonjour,

j'ai fait 1 formulaire simple avec 2 input pour indique le nombre de ligne et nombre de colonnes 

	  <!--début du global du formulaire-->
	  <form id="global-annonce-tableau-modale" class="popup_block" action="toto.php" method="post" >

	  <fieldset>

	  <legend>propriété du tableau</legend>


   	  <!--début : on affiche le nombre de ligne du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">ligne :</label>
	  <div class="annonce-tableau-modale-input icon-input-nombre-ligne-tableau"><input type="text"  placeholder="3" name="nbdeligne" id="nbdeligne" required /></div>
	  </div>
   	  <!--fin : on affiche le nombre de ligne du tableau-->
	  
	  
	  
   	  <!--début : on affiche le nombre de collonne du tableau-->
	  <div class="global-annonce-tableau-modale">
	  <label class="annonce-tableau-modale-label">collonnes :</label>
	  <div class="annonce-tableau-modale-input icon-input-nombre-largeur-tableau"><input type="text"  placeholder="2" name="nbdecolonne" id="nbdecolonne" required /></div>
	  </div>
   	  <!--fin : on affiche le nombre de collonne du tableau-->
	  
	  
	  
	  

   	  <!--début du boutton pour poster le code-->
      <nav id="global-button-annonce-tableau"><ul><li><button type="button" class="icon-button-ajouter" value="inserer-tableau" id="inserer-tableau">insérer un tableau</button></li></ul></nav>
   	  <!--fin du boutton pour poster le code-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->


et le jquery 

	  $(function()
	  {
	  //on affiche le button afin inserrere le tableau
	  $('#inserer-tableau').on('click', function()
	  {
	  // on recupere les données des lignes et des colonnes
	  nblignes = +$('#nbdeligne').val();
	  nbcols = +$('#nbdecolonne').val();
	  $table = $('<table/>');
	  $htmltable=('<table>');
	  
	  // on affiche le nombre de ligne
	  for (i = 0; i < nblignes; i++)
	  {
	  $htmltable+="<tr>"
	  $line = $('<tr/>');
	  
	  //  on affiche le nombre de colonne
	  for (j = 0; j < nbcols; j++)
	  {
      $htmltable+='<td></td>'
	  $cell = $('<td/>').html(i + "_" + j);
	  $line.append($($cell))
	  }
	  
	  
	  // on ffiche
      $htmltable+="</tr>"
      $table.append($($line));
	  }
	  $htmltable+="</table>" 
	  
	  // on affiche dans le textarea
	  $('#annonce-textarea').val($htmltable);
	  
	  })
	  
	  })


quand je met 4 lignes et 2 colonnes et que je click sur insérrer tableau

il m'affiche bien les balises avec 4 tr et 2 td 

<table>
<tr>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
</tr>
</table>


mais, j'ai 2 question pour le moment après on verras au fur à mesure

1/ er question

lorsque j’enserre un tableau , il m'affiche bien les balises ci dessus.

Mais si je rajoute un autre tableau il gardes les valeurs du 1 er tableau

comment, faire pour insérer 2 tableaux et éviter qu'il remplace le 1 er tableau et ui'il remet à 0 les valeurs dans l'input.


2 ème question :

comment afficher le numero dans les balises tr et td

par exemple 

<table>
<tr id="1">
		<td id="1"></td>
		<td id="2"></td>
</tr>
<tr id="2">
		<td id="1"></td>
		<td id="2"></td>
</tr>
<tr id="3">
		<td id="1"></td>
		<td id="2"></td>
</tr>
<tr id="4">
		<td id="1"></td>
		<td id="2"></td>
</tr>
</table>


merci, et ensuie on veras après avoir resoud c'est 2 questions.






Configuration: Windows / Chrome 73.0.3683.86

4 réponses

Réponse 1 / 4
narwouid
Modifié le 2 avril 2019 à 04:02
'lut,
première remarque un tableau n'est pas fait pour cela mais pour des données tabulaires.
C'est donc à éviter, surtout qu'avec CSS.

1ère question:
c'est là que vous 'insérez' un tableau :/ . Encore une fois vous n'utilisez pas correctement les choses. 

// on affiche dans le textarea
   $('#annonce-textarea').val($htmltable);

Un input n'est pas là pour afficher des choses mais c'est un input(en français : entrée) qui sert à insérer une valeur. Ici vous modifiez la valeur en y ajoutant un contenu HTML :s . Vraiment pas terrible. Créez un élément container qui servent à ça et insérez votre HTML correctement, donc pas par val qui concerne la valeur d'un input mais en utilisant append qui sert à insérer un élément HTML.
Avec ça le comportement sera un ajout à la suite et non un remplacement d'une valeur(valeur != élément HTML). Vous pourriez même indiquer en paramètre de fonction la cible qui doit contenir un ajout, ça sera plus souple et réutilisable avec n'importe quel autre code.
2ème question:
Bon encore une fois vous faites fausse route! Non seulement une id est unique (en plus '1' ou '2' c'est pas très parlant, je me demande même si c'est autorisé comme valeur d' ID) donc impossible d'écrire deux fois la même.
En plus ce que vous appelez id est une valeur calculable. Quand vous avez le parent(container) d'autres éléments(ici tr est parent de TD) il vous suffit de compter le nombre d'enfants, par exemple: 


console.log( document.body.childNodes.length); 
//-- indique le nombre d'enfants directement descendants de body

Autres remarques:
_vous avez de sérieuses lacunes et en HTML et en JavaScript.
_votre code y gagnerais à utiliser des fonctions nommées, ça serais plus clair modifiable et simple à comprendre pour y revenir. Par exemple dans votre code créez une fonction qui crée les éléments à insérer et contient les (moches) for avec tr et td(en changeant bien sûr si ce ne sont pas des données tabulaires comme rien ne le laisse penser). Elle pourrais retourner simplement l'élément à insérer. Cela vous permettra de tester aussi progressivement chaque partie pour vous rendre compte vous-même où ça coince:
0
narwouid
Modifié le 2 avril 2019 à 04:10 
function creerAjout(lignes,colonnes){
let h=document.createElement('table');
for(let i =0;i<lignes;i++){//-- ajoute 'i' lignes à h
let ligne = document.createElement('tr');
  for(let j=0;j<colonnes;j++){//-- ajoute 'j' colonnes à (chaque)ligne
   
     ligne.appendChild(document.createElement('td'));
/** ici on crée et insère directement des cellules vides, bien sûr rien n'empêche de les remplir au passage :) */
    
 }
h.appendChild(ligne);//-- ajoute chaque ligne au container parent
}

return h;//-- renvoie le résultat en élément HTML (ici la 'table')
}
function ajouter(cible,ajout){
return cible.appendChild(ajout);
}
//-- donc:

ajouter( $('#container'), creerAjout(2,2));
//-- bon à part ici pas d'utilisation de JQuery, que du pur JS ce qui n'est parfois pas plus mal
/* enfin on gagne un peu moins à taper si on utilise le JQuery .append et $.create mais ici c'est vraiment négligeable, sur un programme plus olourd t utilisant des fonctionnalités de JQuery qui n'existe pas en JS je dis pas....
Pourquoi pas s'en passer carrément ici pour que la page charge plus vite et le script soit plus rapide à s'exécuter dans le navigateur ! JQuery c'est une super librairie mais ça pèse son poids et est plus long à interpréter , donc pour des trucs pareils vaux mieux éviter ;) certes le sélecteur est un peu plus rapide à écrire mais ça vaut pas la peine de charger les 400ko du fichier... autant faire ses propres sélecteurs en 2 lignes au début du script si c'est que pour ça :
*/
function getId(sel){ return document.getElementById(sel);}
function getNames(sel){return document.getElementsByTagName(sel);}
function get(sel, type ='#'){
if(type==='#'){return getId(sel);}
if(type==='.'){return getNames(sel);}
}
0
arthur
2 avril 2019 à 10:59
laidse tomber , je laisserais come ca le code

car ca m'a fait très très plaisir de voir des critique envoyant une réponse des le matin

vous aidez pas les gens vous critiquer

a moin que c'est vous qui ailez un petit souci

en disant que je ne sais pas qu'un id c'est unique
ca me fait très plaisir de voirune réponse come ca des le matin

on dirais que vous connaissez les gens
0
Réponse 2 / 4
boris
3 avril 2019 à 13:14
moi, je te comprends arthur, si je savait le faire ,je te le ferais

mais, je ne sais pas comment faire

mais attend qu'un webmaster passe par là , peut-être que lui il peut aider à te faire

en espérant que tu tomberas pas un webmaster qui va critiquer le code


j'entrain de faire une association contre les gens qui critique au lieu aider les gens
0
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
3 avril 2019 à 14:15
Bonjour Boris, pardon... Arthur .... car oui... sauf erreur (et j'en doute.....) vous (tu...) êtes une seule et même personne....
Quel est l’intérêt de poster un message sous un autre pseudo.... ????

Quoi qu'il en soit :
- narwouid a surement été maladroit dans sa réponse...... mais il a eu la courtoisie de venir répondre
- narwouid a proposé un code.... l'as tu au moins testé ???
- Si on n'aime pas recevoir de critiques.... on ne poste pas sur les forums
- Poster sous un second pseudo pour essayer d'enfoncer la personne qui a répondu est d'une bêtise sans nom....
- Tu parles du fait qu'un webmaster passerait par ici..... heu... pourquoi un webmaster ?? Sais-tu au moins ce qu'est le "vrai" travail d'un webmaster ?? Tu sembles confondre avec un développeur..... ce sont deux métiers bien différents en vrai...

Bref... ce que tu nommes "critique" peut être renommé "remarques" ... et dans ce cas... ces remarques sont justifiées.
Si tu ne veux pas en tenir compte, passe ton chemin.... et tant pis pour toi.

Bonne journée.
0
Réponse 3 / 4
arthur
3 avril 2019 à 17:07
bonjour, jordane45 , oui j'ai tester il ne fonctionne pas.

pour ingfo, je ne connais pas boris .

bref : je vais essayer de re expliquer clairement

j'ai fais un formulaire 


	  <!--début du global du formulaire-->
	  <form id="global-annonce-tableau-modale" class="popup_block" action="toto.php" method="post" >

	  <fieldset>

	  <legend>propriété du tableau</legend>
nombre de ligne :
      <br />
<input type="text"  placeholder="3" name="nbdeligne" id="nbdeligne" required />
      
      <br />
      nombre de collonne
      <br />
      
      <input type="text"  placeholder="2" name="nbdecolonne" id="nbdecolonne" required />      
      <br />
      <br />
 largeur     
            <br />

   <input type="text" placeholder="500" name="largeurtableau" id="largeurtableau" required />  
          <br />
      <br />  
      bordure :
      <br />
      <input type="text" placeholder="1" name="borduretableau" id="borduretableau" required />
      <br /><br />
      
     <select id="styletableau" name="styletableau">
     <option data-role="aucune-bordure">aucune bordure</option>
    <option data-role="bordure-exterieure">bordure extérieure</option>
    <option data-role="grille-entiere">grille entière</option>
</select> 
      
      
      
            <br /><br />
      
     <select id="textetableau" name="textetableau">
     <option data-role="texterouge">rouge</option>
    <option data-role="textevert">vert</option>
    <option data-role="textegris">gris</option>
</select> 
      
          <br />
      <br />  
     <select id="fondtableau" name="fondtableau">
     <option data-role="fondrouge">rouge</option>
    <option data-role="fondvert">vert</option>
    <option data-role="fondgris">gris</option>
</select>      
          <br />
      <br />  
      <select id="alignementtableau" name="alignementtableau">
     <option data-role="centrer">centrer</option>
    <option data-role="gauche">gauche</option>
    <option data-role="droite">droite</option>
</select>  
           <br />
      <br /> 
      
      
      
     	  <!--début du boutton pour poster le code-->
      <button type="button" class="icon-button-ajouter" value="inserer-tableau" id="inserer-tableau">insérer un tableau</button>
   	  <!--fin du boutton pour poster le code-->

	  </fieldset>
	  </form>
    
      
      
      <textarea id="annonce-textarea" data-autoresize spellcheck="false" placeholder="votre texte" name="text"></textarea>





et le code jquery pour info j'ai rajouter des variables 


	  $(function()
	  {
	  //on affiche le button afin inserrere le tableau
	  $('#inserer-tableau').on('click', function()
	  {
	  // on recupere les données des lignes et des colonnes
	  nblignes = +$('#nbdeligne').val();
	  nbcols = +$('#nbdecolonne').val();
	  largeur = +$('#largeurtableau').val();
	  bordure = +$('#borduretableau').val();
	  style = +$('#styletableau').val();
	  texte = +$('#textetableau').val();
	  fond = +$('#fondtableau').val();
	  alignement = +$('#alignementtableau').val();

      
      
      
      
	  $table = $('<table/>');
	  $htmltable=('<table>');
	  
	  // on affiche le nombre de ligne
	  for (i = 0; i < nblignes; i++)
	  {
	  $htmltable+="\n<tr>"
	  $line = $('<tr/>');
	  
	  //  on affiche le nombre de colonne
	  for (j = 0; j < nbcols; j++)
	  {
      $htmltable+='\n\t\t<td></td>'
	  $cell = $('<td/>').html(i + "_" + j);
	  $line.append($($cell))
	  }
	  
      
   
      
      
      
      
      
      
      
      
	  
	  // on ffiche
      $htmltable+="\n</tr>"
      $table.append($($line));
	  }
	  $htmltable+="\n</table>" 
	  
	  // on affiche dans le textarea
	  $('#annonce-textarea').val($htmltable);
	  
	  })
	  
	  })


là si tu remplit les 2 premières input

nombres de ligne : 3
nombre de colone 4

là je vois bien les balises suivants 



<table>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
</table>



après, là je coince un peux j'ai bien mis les varibles pour recupere tout les petits mots dans le formulaires 
  nblignes = +$('#nbdeligne').val();
	  nbcols = +$('#nbdecolonne').val();
	  largeur = +$('#largeurtableau').val();
	  bordure = +$('#borduretableau').val();
	  style = +$('#styletableau').val();
	  texte = +$('#textetableau').val();
	  fond = +$('#fondtableau').val();
	  alignement = +$('#alignementtableau').val();


mon but : c'est de faire come ca

par exemple si tu remplis les 4 inputs et les 4 selects

tu veux

3 lignes.
3 colonnes.
10 em pour largeur.
1px pour la bordure

pour les select:

grille entière

texte rouge

fond gris


après avoir cliquer sur le button insérrer tableau.

là, on verra le code html d'un tableau que ta remplit grace aux formulaire 



<table width="6" border="1" class="tableau-centrer texte-rouge fond-gris">



<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
<tr>
		<td></td>
		<td></td>
		<td></td>
</tr>
</table>


là j'ai mis la class sur table mais après on, veras coment on fera pour éventuellement mettres des class sur tr et td

et on verra après comment je pourrais fusionner 1 colonne en 2

là tu me diras coment tu veux afficher uneclass sur le code.

je te dirais simplement, en récupérant par data role afin d’afficher la class


si quelqu'un peut m'aidé à faire des boucles en boucle en boucle

et après, on verra comme modifier les balise table tr td par tableau ligne et colonne

et qu'on affiche le numero

par exemple ca donnera

<code html>

<tableau width="6" border="1" class="tableau-centrer texte-rouge fond-gris">



<ligne1>
<colonne1></colonne1>
<colonne2></colonne2>
<colonne3></colonne3>
</ligne1>
<ligne2>
<colonne1></colonne1>
<colonne2></colonne2>
<colonne3></colonne3>
</ligne2>
<ligne3>
<colonne1></colonne1>
<colonne2></colonne2>
<colonne3></colonne3>
</ligne3>
<ligne4>
<colonne1></colonne1>
<colonne2></colonne2>
<colonne3></colonne3>
</ligne4>
</tableau>


en tout gardant les balise original table tr td dans la source

si quelqu'un pouvait m'aidé à faire le tableau ;)


si je pouvais vous donner 500 euros je le ferais tout de suite mais come je suis une personne en situation handicape, il me reste 10 euro le 15 du moins pour vivre ;)







pour info : si boris passe par là , veuillez ne pas encombrer ce topics merci d'avance
0
Réponse 4 / 4
arthur
4 avril 2019 à 12:22
je mets resolu, car l y a qqun qui m'explique ligne par ligne et qui prend le temps de bien m'expliquer

je met sujet resolu ;)
0

Discussions similaires

Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses
Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses
Trouver le nom d'un tableau avec sa photo.
lillo56 -
zetnot -

11 réponses
Modèle fichier excel comparateur mutuelle
PASCALOU -
Raymond PENTIER -

1 réponse