js指定格式合并数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var arr = [
        ['abc1', 'abc@qq.com', '80'],
        ['abc1', 'abc@qq.com', '50'],
        ['abc1', 'abc@qq.com', '150'],
        ['1232', '123@qq.com', '60'],
        ['1232', '123@qq.com', '30'],
        ['aaa', '123@qq.com', '130'],
    ]
    //  结果    [
    // ['abc1','abc@qq.com',['80','50','150']],
    // ['1232','123@qq.com',['60','30']],
    // ['aaa','123@qq.com','130'],
    // ]
    function mergeArr(arr) { 
        var newArr = [];
        arr.forEach(item => {
            var dataItem = item
            if (newArr.length > 0) {
                var filterVal = newArr.find(v => {
                    return v[0] == dataItem[0]
                })
                if (filterVal) {
                    newArr.forEach(n => {
                        if (n[0] == filterVal[0]) {
                            let lastVal = null
                            if (typeof (filterVal[2]) == 'string') {
                                lastVal = [filterVal[2]]
                            } else {
                                lastVal = filterVal[2]
                            }
                            n[2] = [...lastVal, item[2]]
                        }
                    })
                } else {
                    newArr.push(dataItem)
                }
            } else {
                newArr.push(dataItem)
            }

        })
        return newArr
    }
    console.log(mergeArr(arr))
</script>

</html>

第二种解法

let arr2 = arr1.reduce((arr, item) => {
        let flag = arr.some((el, index) => {
            if (el[0] === item[0]) {
                arr[index][2] = [...el[2], item[2]];
                return true;
            }
        });
        if (!flag) {
            let temp = [...item];
            temp[2] = [item[2]];
            arr.push(temp);
        }
        return arr;
    }, []);
    console.log(arr2)

// 输出
    //[
    // ['abc1','abc@qq.com',['80','50','150']],
    // ['1232','123@qq.com',['60','30']],
    // ['aaa','123@qq.com',['130']],
    // ]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
我们可以通过以下步骤来实现前端表格多条数据合并成一条提交: 1. 首先,我们需要在前端页面中设计一个表格,包含需要合并的多条数据。 2. 接着,我们需要在表格的每一行中添加一个复选框,用于选择需要合并数据。 3. 当用户选择多个数据时,我们需要将这些数据合并为一条数据。可以通过遍历选中的行,将每行数据中的指定字段进行合并,例如合并姓名、电话、地址等字段。 4. 在合并完成后,将合并后的数据显示在表格的第一行,并将其它选中的行删除。 5. 最后,将合并后的数据提交到后端进行保存。 示例代码: HTML: ``` <table> <thead> <tr> <th>选择</th> <th>姓名</th> <th>电话</th> <th>地址</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>张三</td> <td>123456789</td> <td>北京市朝阳区</td> </tr> <tr> <td><input type="checkbox"></td> <td>李四</td> <td>987654321</td> <td>上海市浦东新区</td> </tr> </tbody> </table> <button id="merge-btn">合并</button> ``` JavaScript: ``` const mergeBtn = document.querySelector('#merge-btn'); const tbody = document.querySelector('tbody'); mergeBtn.addEventListener('click', () => { const selectedRows = Array.from(tbody.querySelectorAll('tr')) .filter(row => row.querySelector('input[type="checkbox"]').checked); if (selectedRows.length < 2) { alert('请选择至少两行数据进行合并!'); return; } const mergedRow = selectedRows.reduce((result, row) => { result.name += row.querySelector('td:nth-child(2)').textContent; result.phone += row.querySelector('td:nth-child(3)').textContent; result.address += row.querySelector('td:nth-child(4)').textContent; tbody.removeChild(row); return result; }, { name: '', phone: '', address: '' }); const newRow = document.createElement('tr'); newRow.innerHTML = ` <td><input type="checkbox"></td> <td>${mergedRow.name}</td> <td>${mergedRow.phone}</td> <td>${mergedRow.address}</td> `; tbody.insertBefore(newRow, tbody.firstChild); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值