jquery动态添加不规则表格

项目需要的样子是这样的：

服务数据格式如下：

var vecProjects = [
    {
        strProjectName: 'web前端',
        strStage: "前期",
        strProjectDate: '2017-1-1~2017-10-1',
        strBudget: "5000",
        vecEmployee: [
            {
                strArea: 'a',
                strUserName: '邓**',
                strTimes: '50',
                strJobContent: '哈哈哈哈'
            },
            {
                strArea: 'a',
                strUserName: '何**',
                strTimes: '50',
                strJobContent: '哈哈哈哈'
            },
            {
                strArea: 'a',
                strUserName: '李**',
                strTimes: '50',
                strJobContent: '哈哈哈哈'
            }
        ]
    },
    {
        strProjectName: 'web前端',
        strStage: "中期",
        strProjectDate: '2017-1-1~2017-10-1',
        strBudget: "5000",
        vecEmployee: [
            {
                strArea: 'a',
                strUserName: '**邓',
                strTimes: '50',
                strJobContent: '哈哈哈哈'
            },
            {
                strArea: 'a',
                strUserName: '**何',
                strTimes: '50',
                strJobContent: '哈哈哈哈'
            },
            {
                strArea: 'a',
                strUserName: '**李',
                strTimes: '50',
                strJobContent: '哈哈哈哈'
            }
        ]
    }

];

 

代码如下：

　//清空表格数据
 $("#search-projects-on-manager tbody").empty();
    var  projectRowSpan = 0;
　　//arryProjects 服务器给的数据
    $.each(arryProjects, function (i) {
        var $tr = $("<tr></tr");
        var stageRowSpan = arryProjects[i].vecEmployee.length;
        projectRowSpan += stageRowSpan;
        //项目名称
        var $tdForProjectName = $("<td  class='project-name' rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strProjectName);
        //项目阶段
        var $tdForStage = $("<td rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strStage);
        //项目时间
        var $tdsProjectDate = $("<td rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strProjectDate);
        //项目预算
        var $tdBudget = $("<td rowspan=" + stageRowSpan + "></td>").text(arryProjects[i].strBudget);
        //每个员工的数据
        var employeeData = arryProjects[i].vecEmployee;
        var $tdForArea = "";
        var $tdForstrUserName = "";
        var $tdForTimes ="";
        var $tdForJobContent = "";
        if (employeeData.length == 0) {
             $tdForArea = $("<td></td>").text("");
             $tdForstrUserName = $("<td></td>").text("");
             $tdForTimes = $("<td></td>").text("");
             $tdForJobContent = $("<td></td>").text("");
        }else {
             $tdForArea = $("<td></td>").text(employeeData[0].strArea);
             $tdForstrUserName = $("<td></td>").text(employeeData[0].strUserName);
             $tdForTimes = $("<td></td>").text(employeeData[0].strTimes);
             $tdForJobContent = $("<td></td>").text(employeeData[0].strJobContent);
        }
　　　　　//1.添加一个完整的tr
        $tr.append($tdForProjectName, $tdForStage, $tdsProjectDate, $tdBudget, $tdForArea, $tdForstrUserName, $tdForTimes, $tdForJobContent);
        $("#search-projects-on-manager").find("tbody").append($tr);
　　　　　//2..再循环添加tr
        $.each(employeeData, function (j) {
            if (j >= 1) {
                var $trForEmployee = $("<tr></tr");
                var $tdForArea = $("<td></td>").text(employeeData[j].strArea);
                var $tdForstrUserName = $("<td></td>").text(employeeData[j].strUserName);
                var $tdForTimes = $("<td></td>").text(employeeData[j].strTimes);
                var $tdForJobContent = $("<td></td>").text(employeeData[j].strJobContent);
                $trForEmployee.append($tdForArea, $tdForstrUserName, $tdForTimes, $tdForJobContent);
                $("#search-projects-on-manager").find("tbody").append($trForEmployee);
            }
        });
    });
　　//3.合并第一列的项目名称
    var projectName = "";
    $("#search-projects-on-manager tr").find("td").each(function(i) {
        if( (i == 0)  && ($(this).hasClass('project-name') == true) )  {
            projectName = $(this).text();
        }else if((i != 0 ) && ($(this).hasClass('project-name')) == true) {
            $(this).remove();
        }
     });
     $("#search-projects-on-manager tr").find("td").each(function(i) {
        if( (i == 0)  && ($(this).hasClass('project-name') == true) )  {
            $(this).attr("rowSpan", projectRowSpan);
            return false;
        }
     });

代码有点乱说一下思路：

1.先添加整行

　　一行有几个td就写几个td；

　　同时设置td所占的行数

　　然后添加到table种

2.再循环添加tr

　　注意：此一个tr种只有区域，参与人，人时数，事宜

　　添加到table种

3.合并第一列的项目名称

当是想：直接添加（即不通过上面的第3步），后面发现有点难度，就选用了，上面的方式