Créer un Tableau en javascript

maval
Javascript

Bonjour,

Je suis débutant et je recherche depuis plusieurs jour commet créer un tableau en JavaScript "texte et images" et le trier par ordre alphabétique.

Dans mon Html j'ai ceci :
Je vous remercie d'avance

Cordialement

max


<table class="flag" border="0" width="80%">
            <tr> <!-- 1 -->
<td class="td_text"> ABONDANCE  <br>- 74 001 - </td>
<td class="td_text"> ALBY SUR CHERAN  <br>- 74 002 - </td>
<td class="td_text"> ALLEVES <br>- 74 004 - </td>
<td class="td_text"> ALLINGES  <br>- 74 005 - </td>
<td class="td_text"> ALLONZIER LA CAILLE  <br>- 74 006 - </td>
            </tr>
                  <tr>                       
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ABONDANCE-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ALBY_SUR_CHERAN-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ALLEVES-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ALLINGES-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ALLONZIER_LA_CAILLE-74.jpg" width="95" height="120" ></a></td>      
            </tr>                                        
            <tr> <!-- 2 -->
<td class="td_text"> AMANCY  <br>- 74 007 - </td>
<td class="td_text"> AMBILLY  <br>- 74 008 - </td>
<td class="td_text"> ANDILLY  <br>- 74 009 - </td>
<td class="td_text"> ANNECY  <br>- 74 010 - </td>
<td class="td_text"> ANNECY LE VIEUX <br>- 74 011 - </td>
            </tr>
                  <tr>                       
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/AMANCY-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/AMBILLY-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ANDILLY-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ANNECY-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ANNECY_LE_VIEUX-74.jpg" width="95" height="120" ></a></td>  
            </tr>                                        
            <tr> <!--  --> 
<td class="td_text"> ANNEMASSE  <br>- 74 012 - </td>
<td class="td_text"> ANTHY SUR LEMAN  <br>- 74 013 - </td>
<td class="td_text"> ARBUSIGNY  <br>- 74 015 - </td>
<td class="td_text"> ARCHAMPS  <br>- 74 016 - </td>
<td class="td_text"> ARENTHON  <br>- 74 018 - </td>
            </tr>
                  <tr>                       

                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ANNEMASSE-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ANTHY_SUR_LEMAN-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ARBUSIGNY-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ARCHAMPS-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ARENTHON-74.jpg" width="95" height="120" ></a></td> 
            </tr>                                        
            <tr> <!--  --> 
<td class="td_text"> ARGONAY  <br>- 74 019 - </td>
<td class="td_text"> ARTHAZ PONT NOTRE DAME  <br>- 74 021 - </td>
<td class="td_text"> AYZE  <br>- 74 024 - </td>
<td class="td_text"> BALLAISON  <br>- 74 025 - </td>
<td class="td_text"> BEAUMONT  <br>- 74 031 - </td>
            </tr>
                  <tr>                       

                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ARGONAY-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/ARTHAZ_PONT_NOTRE_DAME-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/AYZE-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/BALLAISON-74.jpg" width="95" height="120" ></a></td>
                <td class="td_image"><a href=".html"><img src="../Blason_france/blason_alpha/BEAUMONT-74.jpg" width="95" height="120" ></a></td> 
            </tr>

Décrivez ici ce que vous cherchez à obtenir

### Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

14 réponses

FiReBlUe

Ta source de données ressemble a quoi?

maval
Auteur

salut FireBlue
Ma source de donnée si j'ai bien compris est un dossier avec tous les blasons.

FiReBlUe

Mais tu les charge en js tu as une structure de ceux-ci?

maval
Auteur

Non justement je cherche à faire cela en Js

FiReBlUe

Désolé tu exprime mal ton probleme, tu dis "Créer un Tableau en javascript" pas charger des données en js et tu es trop vague "un dossier avec tous les blasons" c'est à dire quel type de fichier que des jpg?

Pour moi je pensais que tu avais tes données en js et que tu voulais en créer un tableau.

maval
Auteur

Non je cherche a faire un tableau en Js qui me permet d'afficher mes blasons en Jpg un petit peu comme j'avais fait en html

FiReBlUe

Je te propose ca : https://jsfiddle.net/mL6o9wgp/
C'est peut etre plus simple ainsi que te faire jouer avec les createElement

maval
Auteur

Re,

Je te remercie sur ton exemple https://jsfiddle.net/mL6o9wgp/ c'est exactement la recherchej'ai fait un copier coller et sa ne fonctionne pas peut tu me dire ou j'ai fait l'erreur
merci
. . .
<!DOCTYPE HTML>

<html>
<head>
<title> </title>

<meta charset="utf-8">

</head>

<body>

<div id="tableDIV">
</div>
<script type="text/javascript">
function line(content) {
return "<tr>" + content + "</tr>";
}
function cellText(content) {
return "<td class='td_text'>" + content + "</td>";
}
function cellImg(content) {
return '<td class="td_image"><a href=".html"><img src="' + content + '" width="95" height="120" ></a></td>';
}
var tableDIV = document.getElementById("tableDIV");
var html = '<table class="flag" border="0" width="80%">';
for (i = 0; i < 2; i++) {
html += line(
cellText("ABONDANCE <br>- 74 001 - ")

  • cellText("ALBY SUR CHERAN <br>- 74 002 - ")
    );
    html += line(
    cellImg("../Blason_france/blason_alpha/ALLONZIER_LA_CAILLE-74.jpg")
  • cellImg("../Blason_france/blason_alpha/ALLONZIER_LA_CAILLE-74.jpg")
    );
    }
    html += "</table>";
    tableDIV.innerHTML = html;
    </sript>
    </body>
    </html>
Defy

Il faut inclure ça dans un fichier JavaScript ou une balise script... quand on n’a pas un minimum de compréhension du développement d'un site web ça sert a rien de vouloir faire des choses, on apprend avant comment on incorpore dans le HTML un fichier js, du css, comment on fait un fichier js à part, a quoi servent les balises HTML, brèves comment créer un site statique de A à Z…

Sur le jsfidle on voit bien que le code est dans du JavaScript pas dans du HTML c'est marqué sur la case.. Un minimum de recherche serait pas mal pour commencer...

maval
Auteur

Salut Defy
le code fonctionne trés bien j'ai inclus ça dans une balise script.
Maintenant mon problème et que je veut les classé par ordre alphabetique en me servant de la balise "sort"

FiReBlUe

Tu pourrais nous montrer ton code de facon correct?

maval
Auteur

Re,
Ce code fonctionne trés bien mais j'aimerai lui ajouter une balise pour le mettre en ordre alphabetique

<!DOCTYPE HTML>

<html>
 <head>
    <title>  </title>

    <meta charset="utf-8">

                  <script type="text/javascript" src="../Pagination/js/date_heure_2.js"></script>
              <link rel="stylesheet" type="text/css" href="../Pagination/Css/style_tableau_departements.css"> 

  </head>

<body>

<div id="tableDIV">

</div>

  <script type="text/javascript">

function line(content) {
    return "<tr>" + content + "</tr>";
}

function cellText(content) {
    return "<td class='td_text'>" + content + "</td>";
}

function cellImg(content) {
    return '<td class="td_image"><a href=".html"><img src="' + content + '" width="95" height="120" ></a></td>';
}

var tableDIV = document.getElementById("tableDIV");
    var html = '<table  class="flag" border="0" width="80%">';
    for (i = 0; i < 1; i++) {
                    // 1er ligne texte
        html += line( 
                        cellText("1er texte sur la meme ligne  <br>- 74 001 - ") 
                    + cellText("2eme texte sur la meme ligne  <br>- 74 002 - ")
            + cellText("3eme texte sur la meme ligne  <br>- 74 002 - ") 
             + cellText("4eme texte sur la meme ligne  <br>- 74 002 - ") 
            // 1er ligne images
        ); 
    html += line( 
                        cellImg("../Blason_france/blason_alpha/SUCY_EN_BRIE-94.jpg") 
                    + cellImg("../Blason_france/blason_alpha/THIAIS-94.jpg") 
        + cellImg("../Blason_france/blason_alpha/VALENTON-94.jpg") 
        + cellImg("../Blason_france/blason_alpha/THIAIS-94.jpg")

        ); 
                  // 2éme ligne texte
                html += line( 
                        cellText("1er texte sur la deuxieme ligne  <br>- 74 001 - ") 
                    + cellText("2eme texte sur la deuxieme ligne  <br>- 74 002 - ")
                + cellText("3eme texte sur la deuxieme ligne  <br>- 74 002 - ")
            + cellText("4eme texte sur la deuxieme ligne  <br>- 74 002 - ")
                    // 2éme ligne images
        ); 
    html += line( 
                        cellImg("../Blason_france/blason_alpha/VILLECRESNES-94.jpg") 
                    + cellImg("../Blason_france/blason_alpha/VILLEJUIF-94.jpg")
                + cellImg("../Blason_france/blason_alpha/VILLEJUIF-94.jpg") 
            + cellImg("../Blason_france/blason_alpha/VILLEJUIF-94.jpg") 
        ); 
    }
    html += "</table>";

    tableDIV.innerHTML = html;

</script>

</body>
</html>

@+
Max

FiReBlUe

Quels données tu veux trier?
exemple?

   1        2       3
  IMG     IMG   IMG
   4        5       6
  IMG     IMG   IMG
   7        8       
  IMG     IMG
maval
Auteur

Bonjour
Oui je voudrais trier les images et leurs noms qui vont avec car j'ai environ 200 images par ville en moyenne et je rajoute a faire et mesure
J'espere m'avoir bien expliquer.
Je te remercie et te souhaite un bon WE

Max