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.
6 réponses
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
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>
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
};
});
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;
}
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
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>
Questions connexes
De nouvelles questions
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.