Je suis coincé avec ce problème. Je voulais obtenir toutes les valeurs de toutes les entrées de la table mais j'ai du mal à obtenir toutes les valeurs. Le nombre de lignes du tableau est dynamique.

<table id="receiptTable" class="table table-bordered">
<thead>
    <th class="hidden">
        <label>Order Item ID</label>
    </th>
    <th class="col-md-3">
        <label>Item</label>
    </th>
    <th class="col-md-2">
        <label>UOM</label>
    </th>
    <th class="col-md-2">
        <label>Qty</label>
    </th>
</thead>
<tbody>
        <tr>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="qwe123">
            </td>
            <td class="col-md-3">
                <p>
                    Product 1
                </p>
            </td>
            <td class="col-md-2" hidden>
                <p>
                    UNIT
                </p>
            </td>
            <td class="col-md-2">
                <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="0" required>
            </td>
        </tr>
        <tr>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="abc123">
            </td>
            <td class="col-md-3">
                <p>
                    Product 2
                </p>
            </td>
            <td class="col-md-2" hidden>
                <p>
                    PCS
                </p>
            </td>
            <td class="col-md-2">
                <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="3" required>
            </td>
        </tr>
</tbody>

J'ai besoin d'obtenir les valeurs de '.orderItemIDValue' et '.qtyFulfilled' et de les stocker dans un tableau d'objets.

javascript jquery input html-table
0
Kevz 17 avril 2018 à 11:09

6 réponses

Meilleure réponse

Itérer les tr à l'intérieur du table en utilisant map

var inputVals = $("#receiptTable tbody tr").map( (i,v) => ({ 
     orderItemId : $(v).find(".orderItemID .orderItemIDValue").val(),
     qty: $(v).find(".orderItemID .qtyFulfill").val()
  })//end of inner function 
).toArray(); //end of map
0
gurvinder372 17 avril 2018 à 08:45

Commander cette démo.

$(document).ready(function(){
$('.tableExample tr').not(':first').each(function() {
	
	var val = $(this).find(".orderItemIDValue").val();
  alert(val);
});
})
.tableExample {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.tableExample thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.tableExample tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableExample">
    <thead>
        <tr>
            <th>Name</th>
            <th>Input</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-md-3">
                <p>Test 1</p>
            </td>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="1">
            </td>
        </tr>
         <tr>
            <td class="col-md-3">
                <p>Test 2</p>
            </td>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="2">
            </td>
        </tr>
         <tr>
            <td class="col-md-3">
                <p>Test 3</p>
            </td>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="3">
            </td>
        </tr>
        
    </tbody>
</table>
0
Sachin Sanchaniya 17 avril 2018 à 08:25

Je sélectionnerais toutes les lignes du tableau, les bouclerais et retournerais un objet contenant le nomClasse comme clé et sa valeur

let values = [...document.getElementById('receiptTable').getElementsByTagName('tr')].map(row => {
  let orderItemIdValue = row.getElementsByClassName('orderItemIDValue')[0].value;
  let qtyFulfill = row.getElementsByClassName('qtyFulfill')[0].value;
  return {
    orderItemIdValue,
    qtyFulfill
  };
});
0
baao 17 avril 2018 à 08:15

Vous pouvez essayer ce code Js:

function getInputValues(){
  var orderItemIDValueInputs = document.querySelectorAll('.orderItemIDValue');
  var qtyFulfilledInputs = document.querySelectorAll('.qtyFulfilled');
  var store = [];
  orderItemIDValueInputs.forEach(function(input){
    var value = input.value;
    store.push(value);
  });
  qtyFulfilledInputs.forEach(function(input){
    var value = input.value;
    store.push(value);
  });

  return store;
}
0
Yangguang 17 avril 2018 à 08:19

Vous pouvez utiliser jQuery comme ceci:

<script>
    jQuery(document).ready(function($)
    {
        var inputValues = [];

        $('input').each(function(i, v)
        {
            inputValues.push($(this).val())
        })
    })
</script>

Cela parcourt toutes les entrées et ajoute la valeur à un tableau appelé inputValues

0
treyBake 17 avril 2018 à 08:16

Utilisez qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get() Il renverra tous les champs pertinents.

$("button").click(function() {
  var orderItemIDValue = [];
  var qtyFulfill = [];

  orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
  qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()

  console.log(orderItemIDValue)
  console.log(qtyFulfill)
})

Démo 

$("button").click(function() {
  var orderItemIDValue = [];
  var qtyFulfill = [];
  
  orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
  qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
  
  console.log(orderItemIDValue)
  console.log(qtyFulfill)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="receiptTable" class="table table-bordered">
  <thead>
    <th class="hidden">
      <label>Order Item ID</label>
    </th>
    <th class="col-md-3">
      <label>Item</label>
    </th>
    <th class="col-md-2">
      <label>UOM</label>
    </th>
    <th class="col-md-2">
      <label>Qty</label>
    </th>
  </thead>
  <tbody>
    <tr>
      <td class="hidden orderItemID">
       <input class="hidden orderItemIDValue" name="orderItemIDValue" value="something">
      </td>
      <td class="col-md-3">
        <p>
          
        </p>
      </td>
      <td class="col-md-2" hidden>
        <p>
         
        </p>
      </td>
      <td class="col-md-2">
        <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="0" required>
      </td>
    </tr>    <tr>
      <td class="hidden orderItemID">
       <input class="hidden orderItemIDValue" name="orderItemIDValue" value="123">
      </td>
      <td class="col-md-3">
        <p>
          
        </p>
      </td>
      <td class="col-md-2" hidden>
        <p>
         
        </p>
      </td>
      <td class="col-md-2">
        <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="3" required>
      </td>
    </tr>
  </tbody>
</table>
<button>getdata</button>
0
Carsten Løvbo Andersen 17 avril 2018 à 08:17
49872910

Questions connexes

30 Ajouter une ligne de tableau dans jQuery
29 Comment obtenir un horodatage en JavaScript?
27 Comment vérifier si un tableau contient une valeur en JavaScript?
17 Comment obtenir les enfants du sélecteur $ (this)?
21 Obtenir l'URL actuelle avec JavaScript?
29 Comment remplacer toutes les occurrences d'une chaîne?
18 Désactiver / activer une entrée avec jQuery?
30 Récupérer le texte sélectionné dans une liste déroulante (case de sélection) à l'aide de jQuery

De nouvelles questions

2 Itération à travers l'objet de base de données Firebase et attribution de clés aux composants de réaction
2 Vous cherchez à exécuter une fonction après l'extraction dans ReachJS
2 Discrimination des prop typescript dans le composant fonctionnel de réaction
2 Rails - transmission de hachage de données de Ruby à JS via le fichier js.erb
2 Comment modifier les valeurs de clé d'un objet en LowerCase pour le tri
3 Soumettre par programme un ensemble de formulaires avec dangerouslySetInnerHTML
2 passer des valeurs de données de la fonction interne à la fonction interne avec js / jquery
3 javascript json trouve la valeur pour chaque chemin donné; gérer les erreurs
2 Déclencher une fonction dans un composant fonctionnel parent React à partir de son enfant
3 Comment changer le nom du mois anglais en arabe
Toutes les questions sur javascript >

javascript

Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.

Plus à propos javascript...