我正在努力从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' />字符串
当有人单击Cart按钮时，我想循环遍历sales[][]数组中的所有条目，并仅显示'quty'或'price'不为空的产品。流程如下：
1.遍历所有sales[][quty]和sales[][price]值。如果其中任何一个值不为空，则返回sales[]中的键。
1.在上面的HTML代码中，只有产品sales[1]和sales[3]有这些值。所以我想返回1和3。
1.从这些键中读取数据并将其显示在HTML表中。例如，由于只有键1和3不是空的，我想读取sales[1][qty]，sales[1][price]，sales[1][name]，sales [1][purchaseid]的值-以及sales[3][qty]，sales[3][price]，sales[3][name]，sales[3][purchaseid]的值。
1.将它们呈现在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;
}型
有没有人能给予我一些关于如何继续这件事的指点？
谢谢你，谢谢
2条答案
按热度按时间iibxawm41#
一种方法是简单地在循环中使用动态属性选择器。
我们首先尝试找到
name='sales[1][qty]'的字段，如果存在，我们检查该值是否不为空，并读取相同索引的相应其他字段值。我在这里放了一个简单的console.log语句来显示浏览器控制台中的值--这部分你必须用该数据实际填充一个表来替换。
在循环结束时，我们将索引增加1，并尝试在下一次迭代中找到下一个数量字段。一旦我们没有找到任何字段，就该中断循环了。
个字符
6qqygrtg2#
这是另一种使用jQuery的方法，并循环遍历
name属性设置为sales后跟[#][qty]或[#][price]的输入元素。坦率地说，这是一种浪费，因为索引之间没有间隔，对于这些元素，它们应该是一个连续的数字列表。