Javascript dynamique tableau de chaînes de caractères

Ce que je veux dire c'est que sur une page, l'utilisateur peut entrer un nombre ou trente numéros, puis il/elle appuie sur le bouton OK et la page suivante montre le tableau dans le même ordre, comme il était entré, un élément à la fois.

Ok, donc vous avez besoin d'une saisie de l'utilisateur en premier? Il ya un couple de méthodes de comment le faire.

1. Premier est le prompt() fonction qui affiche une fenêtre demandant à l'utilisateur pour une entrée.
   • Avantages: facile. Inconvénients: laid, ne peut pas revenir en arrière pour modifier facilement.
2. Deuxième est à l'aide de html <input type="text"> champs.
   • Avantages: peut être de style, l'utilisateur peut facilement passer en revue et modifier. Le contre: un peu plus de codage nécessaire.

Pour la prompt méthode, la collecte de vos chaînes est un doddle:

var input = []; //initialise an empty array
var temp = '';
do {
    temp = prompt("Enter a number. Press cancel or leave empty to finish.");
    if (temp === "" || temp === null) {
        break;
    } else {
        input.push(temp);  //the array will dynamically grow
    }
} while (1);

_{(Ouais c'est pas la plus jolie boucle, mais il est tard et je suis fatigué....)}

L'autre méthode nécessite un peu plus d'effort.

1. Mettre un seul champ de saisie sur la page.
2. Ajouter un onfocus gestionnaire pour elle.
   1. Vérifier si il y a un autre élément d'entrée après celui-ci, et si c'est le cas, vérifiez si elle est vide.
      • Si il y est, ne pas faire n'importe quoi.
      • Sinon, créez une nouvelle entrée, au lendemain de celui-ci et appliquer le même gestionnaire à la nouvelle entrée.
3. Lorsque l'utilisateur clique sur OK, une boucle sur tous les <input>s sur la page et de les stocker dans un tableau.

par exemple:

//if you put your dynamic text fields in a container it'll be easier to get them
var inputs = document.getElementById('inputArea').getElementsByTagName('input');
var input = [];
for (var i = 0, l = inputs.length; i < l; ++i) {
    if (inputs[i].value.length) {
        input.push(inputs[i].value);
    }
}

Après que, quelle que soit votre méthode de collecte de l'entrée, vous pouvez imprimer les chiffres sur l'écran dans un certain nombre de façons. Un moyen simple serait comme ceci:

var div = document.createElement('div');
for (var i = 0, l = input.length; i < l; ++i) {
    div.innerHTML += input[i] + "<br />";
}
document.body.appendChild(div);

Je l'ai mis ensemble, de sorte que vous pouvez voir le travail sur jsbin

Invite méthode: http://jsbin.com/amefu

Entrées méthode: http://jsbin.com/iyoge

Autant que je sache, Javascript a des tableaux dynamiques. Vous pouvez ajouter,supprimer et modifier les éléments à la volée.

var myArray = [1,2,3,4,5,6,7,8,9,10];
myArray.push(11);
document.writeln(myArray);  //Gives 1,2,3,4,5,6,7,8,9,10,11


var myArray = [1,2,3,4,5,6,7,8,9,10];
var popped = myArray.pop();
document.writeln(myArray);  //Gives 1,2,3,4,5,6,7,8,9

Vous pouvez même ajouter des éléments comme des

var myArray = new Array()
myArray[0] = 10
myArray[1] = 20
myArray[2] = 30

vous pouvez même modifier les valeurs

myArray[2] = 40

Ordre D'Impression

Si vous voulez dans le même ordre, cela devrait suffire. Javascript imprime les valeurs dans l'ordre des valeurs de clé. Si vous avez inséré des valeurs du tableau dans de plus en plus monotone valeurs de clé, puis elles seront imprimées de la même façon, sauf si vous souhaitez modifier l'ordre.

Page De Présentation

Si vous êtes à l'aide de JavaScript, vous n'avez même pas besoin de présenter les valeurs de l'autre page. Vous pouvez même afficher les données sur la même page en manipulant le DOM.

Ici est un exemple. Vous entrez un nombre (ou autre) dans la zone de texte et appuyez sur "ajouter" pour le mettre dans le tableau. Ensuite, vous appuyez sur "afficher" pour afficher le tableau des éléments comme des éléments.

<script type="text/javascript">

var arr = [];

function add() {
   var inp = document.getElementById('num');
   arr.push(inp.value);
   inp.value = '';
}

function show() {
   var html = '';
   for (var i=0; i<arr.length; i++) {
      html += '<div>' + arr[i] + '</div>';
   }
   var con = document.getElementById('container');
   con.innerHTML = html;
}

</script>

<input type="text" id="num" />
<input type="button" onclick="add();" value="add" />
<br />
<input type="button" onclick="show();" value="show" />
<div id="container"></div>

Veuillez vérifier http://jsfiddle.net/GEBrW/ pour le test en direct.

Vous pouvez utiliser la même méthode pour les tableaux dynamiques de création.

var i = 0;
var a = new Array();

a[i++] = i;
a[i++] = i;
a[i++] = i;
a[i++] = i;
a[i++] = i;
a[i++] = i;
a[i++] = i;
a[i++] = i;

Le résultat:

a[0] = 1
a[1] = 2
a[2] = 3
a[3] = 4
a[4] = 5
a[5] = 6
a[6] = 7
a[7] = 8