制作表格的一些笔记

作为写java的菜鸟，前几天接到了一个写表格的任务，虽然学过js，但是很长时间没有用了，再次去操作的js代码时候各种蒙B，今天做的差不多了，赶紧记下来过程，以便以后翻阅，直接上代码。

这样的一个表格需求，这里的难度在于如何去动态的合并单元格。

数据以json的形式传给前端

先说一下我的整体思路：将后台的数据先一行一行的显示出来，在遍历整个表格找出同一个人的数据有多少条(count)、从哪一行开始的(start),通过这两个条件按照图去慢慢写合并的操作，代码中for循环的条件和角标的控制可以通过前端js调试工具慢慢调试。

1.先按照车牌号去将所有的数据分组，这里我有借鉴网上其他大神的动态合并单元格的js，mergeCells是提取出来的合并操作，参数start从第几行开始，count有几行数据。

he(start,count)方法是插入小计行的方法

var count=1；

var start；

var col="";

var tab = document.getElementById("tab");

for (var i = 1; i < tab.rows.length; i++) {
        if (col == tab.rows[i].cells[1].innerHTML) {
            count++;
        } else {
            if (count > 1) { //合并
                start = i - count;
                mergeCells(start, count);
                he(start + count, count);
                count = 1;
            }
            col = tab.rows[i].cells[1].innerHTML;
        }
    }

    //如果是最后几行是同一人数据
    if (count > 1) {
        start = tab.rows.length - count;
        mergeCells(start, count);
        he(start+count,count);
    }

2.合并方法：分为车牌号，驾驶员，所属项目，车辆类型。四列的合并和日期的合并。delDateCells(start,count)是删除日期多余单元格的方法，最后几条数据的合并参数会有所不同。

function mergeCells(start,count){
    var con=1;
    var col = "";
    var del;//从第几行开始删除多余的单元格
    var tab = document.getElementById("tab");
    //合并车辆基本信息
    tab.rows[start].cells[1].rowSpan = tab.rows[start].cells[2].rowSpan = tab.rows[start].cells[3].rowSpan = tab.rows[start].cells[4].rowSpan  = count;
    //合并日期
    for (var i = 0; i < count; i++) {
        if(col == tab.rows[start+i].cells[6].innerHTML){
            con++;        
        }else{
            if(con>1){//合并


                tab.rows[start+i - con].cells[6].rowSpan = con;
                delDateCells(start+i - con + 1, con - 1);
           }
           col = tab.rows[start+i].cells[6].innerHTML;
           
           con = 1;
       }
    }
    if(con>1){//如果是最后几行合并
        tab.rows[start+count-con].cells[6].rowSpan = con;
        del = start + count - con + 1;
        delDateCells(del, con - 1);
    }


    //删除前四列多余单元格
    for (var j = 0; j < count-1; j++) {
        tab.rows[start+1 + j].cells[1].style.display = "none";
        tab.rows[start+1 + j].cells[2].style.display = "none";
        tab.rows[start+1 + j].cells[3].style.display = "none";
        tab.rows[start+1 + j].cells[4].style.display = "none";
    }
}

3.小计行的插入，小计我选择将数据合并完了之后再去找到相应的位置去插入小计这一行，小计行中的一些数据，需要另外写方法去计算，有start和count两个参数是可以计算出来的，这里考虑可能会有更好的方法就先不写出来。

/*
    计算小计
*/
function he (start,count) {
    var tab = document.getElementById("tab");
    var row = tab.insertRow(start);
    var cell0 = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    var cell6 = row.insertCell(6);
    cell0.innerHTML = 1;
    cell1.innerHTML = "小计";
    cell1.colSpan = 5;
}