jquery动态添加不规则表格

2018/05/04 18:15
阅读数 45

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

服务数据格式如下:

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步),后面发现有点难度,就选用了,上面的方式

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部