英文:
Get data outside Loop in JQuery
问题
I can help you with the translation. Here is the translated text:
当我尝试在点击获取所有输入类型数据时控制台数据时,它返回`未定义`。我想要的只是获取每个输入类型的值,并使用`push`将其存储在列表中,我应该再创建一个for循环吗?
var selected_obj = {
quantity: testtttttt examplee
}
selected_items.push(selected_obj);
Please let me know if you need any further assistance.
英文:
I have an issue where it returns an unidentified
when I tried to console the data by clicking get all input type data, All I want is to get the value of each input type and store it on list using push
should I make another for loop? just to reiterate each value?
var selected_obj ={
quantity: testtttttt examplee
}
selected_items.push(selected_obj);
what I've tried
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#allcb").change(function() {
$('tbody tr td input[type="checkbox"]').prop(
"checked",
$(this).prop("checked")
);
});
$(document).on("keyup", ".quantity_input", function() {
var $row = $(this).closest('.row');
var value_input = 0;
var price_value = 0;
var total_value = 0;
value_input = $(".quantity_input", $row).val();
price_value = $(".price_value", $row).html();
total_value = parseInt(value_input) * parseInt(price_value);
$(".total_value_row", $row).text(total_value);
});
$(document).on("click", ".remove_data", function() {
var $row = $(this).closest('.row');
var checkboxName = $row.data('for');
var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
$row.remove();
$checkbox.prop('checked', false);
$checkbox.get(0).hasCovered = false;
});
$(document).ready(function() {
$("#add_data").click(function() {
var grid = document.getElementById("Table1");
var message = "Values Description\n";
var checkBoxes = grid.getElementsByTagName("INPUT");
var str = ''
for (var i = 0; i < checkBoxes.length; i++) {
if (
checkBoxes[i].checked &&
checkBoxes[i].name !== "allcb" &&
!checkBoxes[i].hasCovered
) {
var row = checkBoxes[i].parentNode.parentNode;
str +=
'<div class="row" data-for="' + checkBoxes[i].id + '"><div class="col-md-8"><p class="me-3"> ' +
'<a href="#" class="text-body">' +
'<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +
'<span>Quantity</span>&nbsp' +
row.cells[2].innerHTML +
"</a></p> " +
'<span class="me-1">Price </span>&nbsp' +
'<span class="me-1 price_value">' +
row.cells[1].innerHTML +
"</span>&nbsp" +
'<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp' +
'<span class= "total_value_row" >total value is</span> ' +
"</div><hr></div>";
checkBoxes[i].hasCovered = true;
}
}
$(".whole-div-class").append(str);
});
$("#get_data").click(function() {
var selected_items = [];
var $row = $(this).closest('.row');
var grid = document.getElementById("Table1");
var checkBoxes = grid.getElementsByTagName("INPUT");
var str = ''
for (var i = 0; i < checkBoxes.length; i++) {
value_input = $(".quantity_input", $row).val();
console.log(value_input);
console.log("test");
var selected_obj ={
quantity: value_input
}
selected_items.push(selected_obj);
}
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="Table1">
<thead>
<tr>
<th>
<input type="checkbox" id="allcb" name="allcb" />
</th>
<th>Price</th>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="cb1" name="cb1" />
</td>
<td>200</td>
<td> 25</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb2" name="cb2" />
</td>
<td>300</td>
<td>30</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb3" name="cb3" />
</td>
<td>400</td>
<td>50</td>
</tr>
</tbody>
</table>
<br />
<button type="button" id="add_data">Add datas</button>
<button type="button" id="get_data">Get all input type data</button>
<ul class="list-group mb-3 row whole-div-class"></ul>
<!-- end snippet -->
答案1
得分: 1
你可以通过类选择所有输入元素,然后使用 map
获取对象数组。
const selectedItems = $('.quantity_input').map((i, el) => ({quantity: el.value})).get();
英文:
You can select all the input elements by class, then use map
to get an array of objects.
const selectedItems = $('.quantity_input').map((i, el) => ({quantity: el.value})).get();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论