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

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 Obtenez toutes les valeurs uniques dans un tableau JavaScript (supprimez les doublons)

De nouvelles questions

2 Le composant fonctionnel React avec une classe non-JSX a un tableau interne retournant undefined
1 Comment changer la fonction d'affichage en fonction des options sélectionnées?
1 Calculer des séries avec des racines continues dans la boucle JavaScript
1 Obtenir le nom statique de BigInt64Array
1 J'essaie d'ajouter mon bouton de fermeture à mes nouveaux éléments de liste, mais cela ne semble pas fonctionner
1 Pourquoi Logger.log ne voit pas le deuxième argument et console.log le fait?
1 React n'a pas réussi à compiler
1 La liste de réaction n'est pas de nouveau rendu de la table après le tri des éléments dans l'état
1 Filtrage pour un tableau avec trois entrées. Entrée non définie si la clé est vide
2 L'écouteur d'événements Javascript doit cliquer deux fois pour que la fonction fonctionne
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...