0
votes

JQuery Comment ajouter des données à la table Utilisation des champs de saisie

Je travaille avec une table et j'ai des problèmes. Dans la plupart des cas normaux, j'ai 4 champs de saisie dans lesquels je peux ajouter des données et l'envoyer à la table à mon avis. Mais si cela se produit, j'ai plus que j'ai plus les 4 valeurs, et j'ai besoin d'ajouter plus, j'ai ajouté un bouton appelé "plus" strud> qui efface les valeurs précédentes du champ et attend qu'un utilisateur ajoutez-les neufs.

donc le bouton "plus" fort> ajoute des données à la table, mais après avoir appuyé sur le bouton envoyer au tableau strong> toutes les données disparaissent. P> Code: p>

p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<center><input type="text" placeholder="Enter number of data"></center>
<center><button class="coButton">Send to table</button></center>
<center><input type="text" id="opBarcode" placeholder="Enter number of layers"><button class="plusButton">Plus</button></center>
<center><button class="coButton">Send to table</button></center>
<center><input type="text" placeholder="Enter number of nest"></center>
<center><button class="coButton">Send to table</button></center>
<center><input type="text" placeholder="Enter number of layers"></center>
<center><button class="coButton">Send to table</button></center>
<table class="changeoverTable hide">
  <thead>
    <tr>
      <th colspan="3">Table</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>


3 commentaires

Sur une note différente, évitez d'utiliser , c'est obsolète: développeur.mozilla.org/en-us/docs/web/html/element/center


@Armel il est seulement de présenter le code ici


"mais après avoir appuyé sur le bouton envoyer à la table à la table, toutes les données disparaissent" - Eh bien, vous n'êtes pas Garder cette donnée n'importe où ... Vous videz l'entrée de texte à côté du bouton plus après la Ce dernier a été cliqué et que vos boutons d'envoi aux tablettes désignent toujours toute la table, puis la reconstruisent en passant par les valeurs des champs de texte ... Si vous souhaitez reconstruire toute la table tout le temps, vous devez conserver ces valeurs ajoutées. via le bouton plus quelque part, de sorte que vous puissiez les insérer à nouveau la prochaine fois. Ou vous devez arrêter de reconstruire toute la table à chaque fois pour commencer avec ...


3 Réponses :


2
votes

Veuillez essayer ceci:

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="mytext" />
<input type="text" id="lastname" />
<input type="text" id="any" />
<br />
<br />
<input type="submit" value="submit" onclick="appen()" id="submit" />
<br />
<br />
<table id="mytable">
  <thead>
    <tr>
      <th>name</th>
      <th>lastname</th>
      <th>anything</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>


12 commentaires

Avez-vous lu la description, je peux ajouter des données à la table, ce qui fonctionne, mais lorsque j'ajouterai les données au tableau "Plus", les données sont disparues.


ohh j'ai raté ça désolé


Dis-moi quel est le but de votre bouton plus? Ce que tu veux exactement?


Ainsi, par exemple, j'ai 4 champs de saisie, mais en même temps, j'ai 7 valeurs, donc au champ de saisie n ° 2, je peux ajouter une valeur supplémentaire à la table en utilisant le bouton Plus


Mais si vous vérifiez le code, vous verrez le bouton plus ajouter des données à la table, mais lorsque vous appuierez sur Envoyer à la table, ces données disparaîtront


Hey s'il vous plaît prenez votre tableau hors de bouton Cliquez sur l'événement Je veux dire l'initialiser dans le monde afin que vous puissiez également avoir vos anciennes valeurs de table.


J'essaie, mais j'ai une boucle, qui ajoutent des données vides au tableau


alors veuillez créer un chèque sur la valeur à ajouter, si c'est NULL, alors ne l'ajoutez pas à la matrice globale qui fonctionnera certainement, laissez-moi essayer je serai bientôt de retour


Boucle Ajouter une valeur de plus L'I J'ai besoin de donc ajouter ce code: si ($ (ceci) .val ()! = "") {Arrnumber.Push ($ (this) .val ()); console.log (Arrnumber); } else {console.log ("Data Empy"); }


La chose que je sais est que le problème que vous rencontrez est à cause de votre réseau ne stocke pas la valeur ancienne lorsque vous ajoutez une nouvelle entrée. La réponse réelle qui fonctionnera consiste à placer votre tableau globalement afin que cliquez sur le bouton de nouveau sur le clic sur le clic. Sélectionnez à nouveau le même problème auparavant.


J'essaie tellement de méthode pour résoudre ces problèmes mais je ne travaille toujours pas.


J'ai posté un nouveau. Votre objectif est d'ajouter autant que des rangées à une table juste?



0
votes

exécutez ceci dans jsfiddle Vous pouvez ajouter autant de lignes sans utiliser de tableau!

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" id="mytext" />
</div>
<br>
<br>
<input type="submit" value="submit" onclick="appen()" id="submit" />

<br />
<br />
<table id="mytable">
    <thead>
        <tr>
            <th>name</th>
  
        </tr>
    </thead>
    <tbody></tbody>
</table>


0 commentaires

1
votes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <center><input type="text" placeholder="Enter number of data"></center>
            <center><button class="coButton">Send to table</button></center>
            <center><input type="text" id="opBarcode" placeholder="Enter number of layers">
    		<button class="plusButton">Plus</button></center>
            <center><button class="coButton">Send to table</button></center>
            <center><input type="text" placeholder="Enter number of nest"></center>
            <center><button class="coButton">Send to table</button></center>
            <center><input type="text" placeholder="Enter number of layers"></center>
            <center><button class="coButton">Send to table</button></center>
        <table class="changeoverTable hide">
            <thead>
                <tr>
                    <th colspan="3">Table</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>


0 commentaires