江湖救急：如何用javascript实现类似sql中group by分组求和？

manlink227 2017-02-25 12:54:10

<html><head> 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

window.onload = (function(){

    var s=0,n="";

    $("input + input[name=a]").each(function(){

        s=0;

        if($("input + input[value="+$(this).attr("value")+"]").index(this)>0){return;}

        $("input + input[value="+$(this).attr("value")+"]").each(function(){

            s+=parseInt($(this).prev().attr("value"));

        });

        n+=s+",";

    });

    $("#sum").val(n.substr(0,n.length-1));

});</script>



</script>

<style> 

</style>



</head>

<body>

<input type='text' id='v1' name='v' value='3'> <input type='text' id='a1' name='a' value='a1'> 

<input type='text' id='v2' name='v' value='5'> <input type='text' id='a2' name='a' value='a1'> 

<input type='text' id='v3' name='v' value='3'> <input type='text' id='a3' name='a' value='b1'> 

<input type='text' id='v4' name='v' value='2'> <input type='text' id='a3' name='a' value='b1'> 

<input type='text' id='v5' name='v' value='3'> <input type='text' id='a3' name='a' value='c1'> 

<input type='text' id='v6' name='v' value='3'> <input type='text' id='a3' name='a' value='c1'> 

<input type='text' id='sum'> 

</body ></html>

我想实现这样的结果：

...全文

485 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2017-02-25

打赏
举报

sort下，然后重新插入dom，在不同的分组中插入小结

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="dvItems">
        <div><input type='text' id='v1' name='v' value='3'> <input type='text' id='a1' name='a' value='a1'></div>
        <div><input type='text' id='v2' name='v' value='5'> <input type='text' id='a2' name='a' value='b1'></div>
        <div><input type='text' id='v3' name='v' value='3'> <input type='text' id='a3' name='a' value='c1'></div>
        <div><input type='text' id='v4' name='v' value='2'> <input type='text' id='a3' name='a' value='a1'></div>
        <div><input type='text' id='v5' name='v' value='3'> <input type='text' id='a3' name='a' value='b1'></div>
        <div><input type='text' id='v6' name='v' value='3'> <input type='text' id='a3' name='a' value='c1'></div>
    </div>
    <input type="button" value="重新分组" onclick="reGroup()" />
    <script>
        var list = $('#dvItems');
        function reGroup() {
            list.find('div.sum').remove();//删除小结div
            var a = list.find('input[name="a"]').get();
            a.sort(function (a1, a2) {
                return a1.value.localeCompare(a2.value);//升序
                //return a2.value.localeCompare(a1.value);//降序
            });
            for (var i = 0; i < a.length; i++) list.append(a[i].parentNode);//重新分组
            var kv = {}, group, len = a.length - 1;
            $(a).each(function (i, el) {//计算并插入结果
                kv[this.value] = (kv[this.value] || 0) + parseFloat($(this).prev().val());
                if (i > 0 && (
                    i == len ||//最后一个
                    group != this.value//换组
                    ))
                    $(this).parent()[i == len ? 'after' : 'before']('<div class="sum">' + group + '的和' + kv[group] + '</div>');
                group = this.value;//更新分组名称                
            });
        }
    </script>
</body>
</html>

cn00439805 2017-02-25