我正在编写一个函数来从一些存储的数据创建一个表，在tbody的第一个单元格下添加thead行中的所有单元格时出现了问题，我注意到删除了thead解决了问题，但我不想删除thead，因为它有助于项目中的其他内容
以下是函数
所需的数据var courses = [
[{name:'xxx',room:'Seminar 1'},{name:'xxx',room:'Seminar 1'},{name:'xxx',room:'Seminar 1'},
{name:'zzz',room:'111'},{name:'zzz',room:'111'},{name:'zzz',room:'111'},{name:'Subject 3 - Instructor 3',room:'yyy'},{name:'Subject 4 - Instructor 4',room:'yyy'},{name:'Subject 5 - Instructor 5',room:'yyy'},{name:'Subject 5 - Instructor 5',room:'yyy'},{name:'Subject 6 - Instructor 6',room:'yyy'},{name:'Subject 6 - Instructor 6',room:'yyy'}],
[{name:'',room:'',room:''},{name:'',room:''},{name:'xyz',room:'Semniar 1'},{name:'xyz',room:'Semniar 1'},{name:'',room:''},{name:'x',room:'1'},{name:'x',room:'1'},{name:'t',room:'2'},{name:'y',room:'2'},{name:'y',room:'3'},{name:'y',room:'3'},{name:'',room:''}],
[{name:'',room:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''}],
[{name:'',room:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''}],
[{name:'',room:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''}],
[{name:'',room:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''},{name:'',room:''}]
];
var days = ['Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday'];
var slots = {start:'08:00',duration:'1:00',count:15,breaks:[4,8,12],break_duration:'0:20'};
var arr = [[3, 0, 0, 1, 3, 0, 0, 1, 1, 1, 1, 1, 1, 2, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]
以下是创建表格的功能
function tableCreate() {
var body = document.getElementById('tablediv');
var tbl = document.createElement('table');
tbl.setAttribute("id","myTable");
var thd = document.createElement('thead');
var row = document.createElement('tr');
thd.setAttribute("class","ant-table-thead");
var head = document.createElement('th')
head.setAttribute('rowspan',2);
head.setAttribute('colspan',1);
head.appendChild(document.createTextNode('Day'));
row.appendChild(head);
var start = slots.start,brk=0,end=undefined;
for(var i=0;i<2;i++)
{
for(var j=0;j<slots.count;j++)
{
head = document.createElement('th')
head.setAttribute('class','column1');
head.setAttribute('colspan',1);
if(i===0)
head.appendChild(document.createTextNode(j+1));
else{
if(slots.breaks.length>brk && j+1===slots.breaks[brk])
{
end = calcTo(start,slots.break_duration);
brk++;
}
else
end = calcTo(start,slots.duration);
head.appendChild(document.createTextNode(start+'-'+end));
start = end;
}
row.appendChild(head);
}
thd.appendChild(row);
row = document.createElement('tr');
}
tbl.appendChild(thd);
var tbd = document.createElement('tbdoy');
for(var i=0;i<days.length;i++)
{ brk=0;
for(var j=0;j<slots.count+1;j++)
{ var td = document.createElement('td');
if(j==0)
{
td.style.backgroundColor = 'rgb(156, 52, 104)';
td.style.color = 'rgb(255, 255, 255)';
td.style.textAlign = 'left';
td.appendChild(document.createTextNode(days[i]));
row.appendChild(td);
}
else{
td.setAttribute("class","column1");
if(slots.breaks.length>brk && j===slots.breaks[brk])
{
if(i===0)
{
td.setAttribute('rowspan',days.length);
td.appendChild(document.createTextNode('b'));
td.appendChild(document.createElement('br'));
td.appendChild(document.createTextNode('r'));
td.appendChild(document.createElement('br'));
td.appendChild(document.createTextNode('e'));
td.appendChild(document.createElement('br'));
td.appendChild(document.createTextNode('a'));
td.appendChild(document.createElement('br'));
td.appendChild(document.createTextNode('k'));
td.style.textAlign = 'center';
td.setAttribute("colspan",arr[i][j-1]);
row.appendChild(td);
}
brk++;
}
else{
var namespan = document.createElement('span');
var roomspan = document.createElement('span');
roomspan.style.color='red';
roomspan.style.verticalAlign='bottom';
roomspan.style.textAlign = 'right';
roomspan.appendChild(document.createTextNode(courses[i][j-1-brk].room));
namespan.style.textAlign = "center";
namespan.appendChild(document.createTextNode(courses[i][j-1-brk].name));
td.appendChild(namespan);
td.appendChild(roomspan);
td.setAttribute("colspan",arr[i][j-1]);
if(arr[i][j-1]>0)
row.appendChild(td);
}
}
}
tbd.appendChild(row);
row = document.createElement('tr');
}
tbl.appendChild(tbd);
body.appendChild(tbl);
}
辅助函数calcTo：
function calcTo(from,dur)
{
var minfrom = parseInt(from.slice(from.indexOf(':')+1));
var mindur = parseInt(dur.slice(dur.indexOf(':')+1));
var hourfrom = parseInt(from.slice(0,from.indexOf(':')));
var hourdur = parseInt(dur.slice(0,dur.indexOf(':')));
var summin=minfrom+mindur,sumhour=hourfrom+hourdur;
if(summin > 59)
{
summin = 60-summin;
sumhour = sumhour+1;
}
if(sumhour > 23)
{
sumhour = 24 - sumhour;
}
return (sumhour<10?'0'+sumhour:sumhour)+":"+(summin<10?'0'+summin:summin);
}
很抱歉给您带来不便，如果对此问题有任何建议，请告诉我，因为这是我第一次发帖并提前致谢。
编辑：我还注意到，如果我保存了生成的html文件并打开了保存的文件，则表格应该被视为应该表示生成的html是正确的，并且正确的单元格对齐所以我会认为这是与脚本相关的东西
Edit2：我提供了示例数据和一些适当的缩进，感谢您应对我并尝试提供帮助
答案 0 :(得分：0)
我能够在这里为其他人重现问题：
原始HTML表格：
https://jsfiddle.net/wnvdnpud/
_
VS Javascript创建表：
https://jsfiddle.net/worw1hv0/
_
这是你的错字造成的问题：
var tbd = document.createElement('tbdoy');
更改为：
var tbd = document.createElement('tbody');