我正在努力从 Javascript/Jquery 中的 HTML 表单读取和操作数据。
上下文：我有一个显示多种产品的销售屏幕，我想循环浏览所有产品，分析它们的内容，并在购物车中显示一些数据。
请原谅我JS知识的匮乏！！
考虑这个 HTML 代码（完整的表单对于每个产品都有更多的变量，所以我在这里简化了它）：
<input type='text' name='sales[1][qty]' value='10.5' />
<input type='text' name='sales[1][price]' value='21' />
<input type='text' name='sales[1][name]' value='Product A' />
<input type='hidden' name='sales[1][purchaseid]' value='3530' />
<input type='text' name='sales[2][qty]' value='' />
<input type='text' name='sales[2][price]' value='' />
<input type='text' name='sales[2][name]' value='Product B' />
<input type='hidden' name='sales[2][purchaseid]' value='3531' />
<input type='text' name='sales[3][qty]' value='2' />
<input type='text' name='sales[3][price]' value='10' />
<input type='text' name='sales[3][name]' value='Product C' />
<input type='hidden' name='sales[3][purchaseid]' value='3532' />
<input type='text' name='sales[4][qty]' value='' />
<input type='text' name='sales[4][price]' value='' />
<input type='text' name='sales[4][name]' value='Product D' />
<input type='hidden' name='sales[4][purchaseid]' value='3533' />
当有人单击“购物车”按钮时，我想循环遍历 sales[][] 数组中的所有条目，并仅显示“数量”或“价格”不为空的产品。流程大概是这样的：
循环遍历所有 sales[][qty] 和 sales[][price] 值。如果其中一个不为空，则返回 sales[] 中的密钥。
在上面的 HTML 代码中，只有产品 sales[1] 和 sales[3] 具有这些值。所以我想返回1和3。
从这些键中读取数据并将其呈现在 HTML 表格中。例如，由于只有键 1 和 3 不为空，所以我想读取 sales[1][qty]、sales[1][price]、sales[1][name]、sales[1][ 的值buyid] - 以及 sales[3][qty]、sales[3][price]、sales[3][name]、sales[3][purchaseid] 的值。
将它们呈现在 HTML 表格中，如下所示：
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td>3530</td>
<td>Product A</td>
<td>10.5</td>
<td>21</td>
</tr>
<tr>
<td>3532</td>
<td>Product C</td>
<td>2</td>
<td>10</td>
</tr>
提交表单时，我可以在 PHP 中轻松完成此操作 - 但这里的想法是不提交表单，这意味着 JS 必须完成这项工作。在 PHP 中，我会按照以下方式进行操作：
foreach($_POST['sales'] as $sale) {
$qty = $sale['qty'];
$price = $sale['price'];
$name = $sale['name'];
$purchaseid = $sale['purchaseid'];
if ($qty > 0 || $price > 0) {
$tableRow .= "<tr><td>$purchaseid</td><td>$name</td><td>$qty</td><td>$price</td></tr>";
}
}
我已经搜索并找到了如何使用下面的代码从 HTML 表单中简单地获取名称和值，但这对我上面的第 2 点和第 3 点没有帮助：
function testCart() {
var str = '';
var elem = document.getElementById('registerForm').elements;
for(var i = 0; i < elem.length; i++)
{
str += "<b>Name:</b>" + elem[i].name + " - ";
str += "<b>Value:</b>" + elem[i].value + "<br />";
}
document.getElementById('myCart').innerHTML = str;
}
有人可以给我一些关于如何进行此操作的指示吗？
谢谢！
一种方法是简单地在循环中使用动态属性选择器。
我们首先尝试找到带有
name='sales[1][qty]'我在这里放置了一个简单的 console.log 语句来显示浏览器控制台中的值 - 您必须用该数据实际填充表来替换该部分。
在循环结束时，我们将索引加一，并尝试在下一次迭代中找到下一个数量字段。一旦我们找不到了，就该结束循环了。
let i = 1;
while (true) {
let qtyField = document.querySelector('[name="sales[' + i + '][qty]"]');
if (!qtyField) {
break;
}
let qty = qtyField.value;
if (qty != '') {
let name = document.querySelector('[name="sales[' + i + '][name]"]').value,
price = document.querySelector('[name="sales[' + i + '][price]"]').value,
id = document.querySelector('[name="sales[' + i + '][purchaseid]"]').value;
console.log("Product:", id, name, price, qty);
}
++i;
}<input type='text' name='sales[1][qty]' value='10.5' />
<input type='text' name='sales[1][price]' value='21' />
<input type='text' name='sales[1][name]' value='Product A' />
<input type='hidden' name='sales[1][purchaseid]' value='3530' />
<input type='text' name='sales[2][qty]' value='' />
<input type='text' name='sales[2][price]' value='' />
<input type='text' name='sales[2][name]' value='Product B' />
<input type='hidden' name='sales[2][purchaseid]' value='3531' />
<input type='text' name='sales[3][qty]' value='2' />
<input type='text' name='sales[3][price]' value='10' />
<input type='text' name='sales[3][name]' value='Product C' />
<input type='hidden' name='sales[3][purchaseid]' value='3532' />
<input type='text' name='sales[4][qty]' value='' />
<input type='text' name='sales[4][price]' value='' />
<input type='text' name='sales[4][name]' value='Product D' />
<input type='hidden' name='sales[4][purchaseid]' value='3533' />