使用JavaScript合并单元格

今天在写代码的时候要求对表格进行合并和统计，但是在合并的过程中出现了好多问题，不过最终还是解决啦，O(∩_∩)O~~，下面把写好的代码展示出来

 <table border="2px " align="center" id="GoodsTable">
                                <thead>
                                <tr>
                                    <th>商品ｺﾄﾞ</th>
                                    <th>商品名</th>
                                    <th>受注ｺﾄﾞ</th>
                                    <th>出庫數</th>
                                    <th>合計出庫數</th>
                                </tr>
                                </thead>
                                <tbody id="GoodsTbody">


                                <tr>
                                    <td>1002</td>
                                    <td>ball</td>
                                    <td>10001</td>
                            <td>100</td>
                            <td>300</td>

                        </tr>
                        <tr>
                            <td>1002</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1002</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1001</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1001</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1001</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1003</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1003</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1003</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1004</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1004</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1004</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>
                        <tr>
                            <td>1004</td>
                            <td>ball</td>
                            <td>10001</td>
                            <td>100</td>
                            <td>300</td>
                        </tr>


                        </tbody>

                    </table>

　　合并单元格之前的效果

 

 加入下边的JavaScript脚本代码

<script type="text/javascript">


    function merge1() {
//      获取当前的表
        var tb = document.getElementById("GoodsTbody");
//       获取行数

//       设置跨行动态变量
        var rowsnum = tb.rows.length;
//第一次遍历，该遍历主要是为了把一个表看成了两个表，然后两个表两相对应
        for (var i = 0; i < rowsnum; i++) {
//            获取第一列里边的值
            var TempStr = tb.rows[i].cells[0].innerHTML;
//            在求总和时赋予初始值
            var total = parseInt(tb.rows[i].cells[3].innerHTML);
//            跨行为0
            rowspan = 0;
//            第二次遍历，不要让自己与自己比较
            for (var j = i + 1; j < rowsnum; j++) {

                if (TempStr == tb.rows[j].cells[0].innerHTML) {
                    rowspan++;
//              求和计算
                    total += parseInt(tb.rows[j].cells[3].innerHTML);
//                    alert("rownums is " + rowspan + "and I is " + i + "and j is" + j + "and total is" + total);
//                  设置跨行
                    tb.rows[i].cells[0].rowSpan = rowspan + 1;
                    tb.rows[i].cells[1].rowSpan = rowspan + 1;
                    tb.rows[i].cells[4].rowSpan = rowspan + 1;
//                    求和操作
                    tb.rows[i].cells[4].innerHTML = total;
//                    不显示以下列
                    tb.rows[j].cells[0].style.display = "none";
                    tb.rows[j].cells[1].style.display = "none";
                    tb.rows[j].cells[4].style.display = "none";

                }
            }
        }

    }
    merge1();

</script>