html表格多行修改,js动态修改数据实现table相同行合并

原table未合并单元格

合并后table

完整示例代码：

时间课程

//原始数据

var list = [

{time:'上午',course:'语文'},

{time:'上午',course:'数学'},

{time:'上午',course:'英语'},

{time:'上午',course:'化学'},

{time:'下午',course:'物理'},

{time:'下午',course:'地理'},

{time:'下午',course:'体育'},

{time:'晚上',course:'自习'}

];

//循环遍历

for (var i = 0;i

//循环开始行

var start_row ;

//需合并的行数

var rowspan = 1;

//循环到最后一行时

if(i==list.length-1){

//如果最后一行和倒数第二行属性不同，则rowspan=1；否则直接结束循环

if(list[i].time!=list[i-1].time){

list[i].rowspan = rowspan;

}

break;

}

//内层循环记录rowspan的数量

for (var j = i;j

//记录循环结束的行数

start_row=j;

//属性相同则rowspan+1；否则直接结束内循环

if(list[j].time==list[j+1].time){

rowspan ++;

}else{

break;

}

}

//为数组添加rowspan属性

list[i].rowspan = rowspan;

//控制外循环从内循环结束的行数开始

i = start_row;

}

/*

处理完数据：

list = [

{time: "上午", course: "语文", rowspan: 4},

{time: "上午", course: "数学"},

{time: "上午", course: "英语"},

{time: "上午", course: "化学"},

{time: "下午", course: "物理", rowspan: 3},

{time: "下午", course: "地理"},

{time: "下午", course: "体育"},

{time: "晚上", course: "自习", rowspan: 1}

]

*/

//页面渲染

var tbody = document.getElementsByTagName('tbody');

var html = '';

for (var i = 0;i

html += '

';

//动态添加rowspan属性

if(list[i].rowspan != null){

html += '

'+list[i].time+'';

}

html += '

'+list[i].course+'';

}

tbody[0].innerHTML = html;