如何用JavaScript/JQuery读取分析PHP生成的多维数组式HTML表单数据

我在使用JavaScript/JQuery读取和处理HTML表单数据时遇到了困难。场景：我有一个展示多款产品的销售页面，希望遍历所有产品，分析其内容，并将部分数据展示在购物车中。以下是简化后的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[][]数组的所有条目，仅显示'qty'或'price'不为空的产品，流程如下：

• 遍历所有sales[][qty]和sales[][price]值，若其中一个不为空（且大于0），返回sales[]中的键；
• 上述HTML中仅sales[1]和sales[3]符合条件，需返回1和3；
• 读取这些键对应的数据并展示在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>
</table>

我在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>";
    }
}

我已找到简单获取表单名称和值的JS代码，但无法满足上述需求：

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;
}

能否提供一些实现思路？谢谢！

实现方案 #

方案一：原生JavaScript实现 #

核心思路是先把表单元素的name解析成结构化数据，再筛选符合条件的产品，最后生成表格：

function updateCart() {
    // 1. 整理表单数据为结构化对象，类似PHP的$_POST['sales']
    const sales = {};
    const formElements = document.getElementById('registerForm').elements;
    
    for (let i = 0; i < formElements.length; i++) {
        const elem = formElements[i];
        // 解析name属性，比如sales[1][qty] → 产品ID=1，字段=qty
        const match = elem.name.match(/sales\[(\d+)\]\[(\w+)\]/);
        if (!match) continue;
        
        const productId = match[1];
        const field = match[2];
        
        // 初始化产品对象
        if (!sales[productId]) {
            sales[productId] = {};
        }
        // 赋值字段值，空字符串转为空值
        sales[productId][field] = elem.value.trim() || '';
    }
    
    // 2. 筛选符合条件的产品：qty>0 或 price>0
    const validProducts = Object.values(sales).filter(product => {
        const qty = parseFloat(product.qty) || 0;
        const price = parseFloat(product.price) || 0;
        return qty > 0 || price > 0;
    });
    
    // 3. 生成表格HTML
    let tableHtml = `
        <table>
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Quantity</td>
                <td>Price</td>
            </tr>
    `;
    
    validProducts.forEach(product => {
        tableHtml += `
            <tr>
                <td>${product.purchaseid}</td>
                <td>${product.name}</td>
                <td>${product.qty || ''}</td>
                <td>${product.price || ''}</td>
            </tr>
        `;
    });
    
    tableHtml += '</table>';
    
    // 4. 插入到页面购物车容器
    document.getElementById('myCart').innerHTML = tableHtml;
}

方案二：JQuery实现 #

用JQuery处理表单数据更简洁，利用serializeArray()快速获取所有表单项：

function updateCart() {
    // 1. 用serializeArray获取所有表单数据，整理成结构化对象
    const sales = {};
    $('#registerForm').serializeArray().forEach(item => {
        const match = item.name.match(/sales\[(\d+)\]\[(\w+)\]/);
        if (!match) return;
        
        const productId = match[1];
        const field = match[2];
        
        if (!sales[productId]) {
            sales[productId] = {};
        }
        sales[productId][field] = item.value.trim() || '';
    });
    
    // 2. 筛选有效产品
    const validProducts = Object.values(sales).filter(product => {
        const qty = parseFloat(product.qty) || 0;
        const price = parseFloat(product.price) || 0;
        return qty > 0 || price > 0;
    });
    
    // 3. 生成表格
    let $table = $('<table>').append(`
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Quantity</td>
            <td>Price</td>
        </tr>
    `);
    
    validProducts.forEach(product => {
        $table.append(`
            <tr>
                <td>${product.purchaseid}</td>
                <td>${product.name}</td>
                <td>${product.qty || ''}</td>
                <td>${product.price || ''}</td>
            </tr>
        `);
    });
    
    // 4. 替换到购物车容器
    $('#myCart').empty().append($table);
}

使用说明 #

• 给购物车按钮绑定点击事件：比如<button onclick="updateCart()">查看购物车</button>
• 确保表单ID为registerForm，购物车容器ID为myCart，与代码中的标识一致
• 代码做了数值转换和空值处理，避免空字符串或非数值导致的判断错误

内容的提问来源于stack exchange，提问作者Andreas BB