Création de tableaux dynamiques à l'aide de javascript, compte tenu de lignes et de colonnes dans les zones de texte

Je suis de retour avec encore un problème (s'il vous plaît coopérer avec mes questions idiotes, je suis très nouveau à JavaScript).
Je suis en train d'essayer de comprendre le concept de tableaux dynamiques en JavaScript. Bien sûr, je suis passé par Google, mais incapable de comprendre le concept 🙁

Ce que j'ai est de deux zones de texte (tb1, tb2) pour entrer le nombre de lignes & nombre de colonnes, respectivement. Alors, quand je clique sur le bouton (b1), il doit créer la table comme par nombre donné de lignes et de colonnes dans les zones de texte. C'est ce que je sais..

<script type = "text/javascript">

function createTable(){
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;

    if(a=="" || b==""){
        alert("Please enter some numeric value");
        }else{
        .......the creating table code goes here.....   

        }
    }

}

</script>

J'ai appeler createTable fonction au bouton onClick="createTable()".
Toute aide est le plus apprécié.

InformationsquelleAutor jsborn17 | 2012-06-27

html javascript

function createTable() {
    var a, b, tableElem, rowElem, colElem;

    a = document.getElementById('tb1').value;
    b = document.getElementById('tb2').value;

    if (a == "" || b == "") {
        alert("Please enter some numeric value");
    } else {
        tableElem = document.createElement('table');

        for (var i = 0; i < a; i++) {
            rowElem = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colElem = document.createElement('td');
                colElem.appendChild(document.createTextNode(j + 1)); //to print cell number
                rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
        }

        document.body.appendChild(tableElem);


    }
}

JSFiddle

http://jsfiddle.net/mprRb/1/

pouvez-vous veuillez expliquer ci-dessous: colElem.appendChild(document.createTextNode(j + 1)); rowElem.appendChild(colElem); wat ne appendChild et createTextNode fait ici?
merci, ça fonctionne, mais j'ai eu raison de me donner les numéros, veuillez s'il vous plaît partager le code, comment je peux dessiner un tableau ayant des frontières?
J'ai mis à jour le JSFiddle code. document.createTextNode crée un nœud de texte, c'est à dire. insère le texte à colElem, dans mon exemple de code. Vous pouvez créer de la frontière avec le CSS. Vérifier mon JSFiddle pour simple exemple

InformationsquelleAutor micadelli

Ici est votre fonction:

function createTable(){
    var a = document.getElementById("tb1").value;
    var b = document.getElementById("tb2").value;

        if(a=="" || b==""){
            alert("Please enter some numeric value");
            }else{


            row=new Array();
        cell=new Array();

        row_num=parseInt(a); //edit this value to suit
        cell_num=parseInt(b); //edit this value to suit

        tab=document.createElement('table');
        tab.setAttribute('id','newtable');

        tbo=document.createElement('tbody');

        for(c=0;c<row_num;c++){
        row[c]=document.createElement('tr');

        for(k=0;k<cell_num;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode((c+1)*(k+1))
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable').appendChild(tab);//'myTable' is the parent control of your table, change it as per your requirements
                }
            }

        }

Ajouter cet attribut à votre bouton b1 onclick="createTable();"

InformationsquelleAutor Ashwin Singh

voici une autre solution à l'aide de innerHTML

<script type = "text/javascript">

function createTable(){

var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;
var resultTable = '<table>';

if(a=="" || b==""){
    alert("Please enter some numeric value");
    }else{
         for(var i=0;i<parseInt(a);i++){
              resultTable += '<tr>';
              for (var j=0;j<parseInt(b);j++)
                   resultTable +='<td><\/td>';
              }
              resultTable +='<\/tr>';

         }
    resultTable+='<\/table';
    }
    return resultTable;

}

</script>

après cela, il suffit d'ajouter le résultat quel que soit l'élément que vous voulez en utilisant innerHTML, par exemple, si vous avez:

<div id='myElement'></div>

vous pouvez ensuite ajouter de la table à l'élément (à l'intérieur de toute fonction js) comme ceci:

var targetElement = document.getElementById('myElement');
targetElement.innerHTML = createTable();

sinon, vous pouvez simplement supprimer la ligne:

return resultTable;

et ajouter la table à l'élément directement à l'intérieur de la fonction, comme ceci:

var target = document.getElementById('myElement');
target.innerHTML=resultTable;

Merci, j'ai essayé ça aussi, corrigez-moi si je me trompe - l'innerHTML code sera utilisé juste après la fonction ferme. Aussi, mon bouton id est "b1", il sera utilisé à la place de " myElement droit?
édité pour plus d'explications.

InformationsquelleAutor Th0rndike

Vous devez vous connecter pour publier un commentaire.