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 menu déroulant ne descend pas après l'affichage défini sur aucun
2 Je veux savoir comment je peux attendre qu'une fonction de retour envoie des données avant d'exécuter la ligne de code suivante
2 Raccourci pour écrire le conditionnel en Javascript
3 Pour tout signe de tête Dom donné, trouvez des hochements de tête qui ont un style css
2 Comment obtenir des éléments dans NodeList
2 TypeError dans React Native
2 Concentrer un élément à partir d'une balise d'entrée html ? Jquery
4 Essayer de faire apparaître la zone de saisie en cliquant sur un bouton - Javascript
2 Remplacer/diviser l'utilisation dans le champ StreetAddress Javascript
2 Fonction de nœud renvoyant un tableau vide
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...