我有一個問題,當我試圖通過單擊獲取所有輸入類型數據來控制數據時,它返回一個未識別的,我想要的是獲取每個輸入類型的值,并使用push將其存儲在列表中。我應該再做一個for循環嗎?只是為了重申每一個價值觀?
var selected_obj ={
quantity: testtttttt examplee
}
selected_items.push(selected_obj);
我嘗試過的
$("#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> ' +
'<span>Quantity</span> ' +
row.cells[2].innerHTML +
"</a></p> " +
'<span class="me-1">Price </span> ' +
'<span class="me-1 price_value">' +
row.cells[1].innerHTML +
"</span> " +
'<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/> ' +
'<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);
}
});
});
<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>
您可以按類選擇所有的輸入元素,然后使用map獲得一個對象數組。
const selectedItems = $('.quantity_input').map((i, el) => ({quantity: el.value})).get();