我通过jquery生成动态html,当我使用rowspan而不是工作正常时。
预期产出:
我的当前代码:
var shopTimeArray = ["10:00:00","10:15:00","10:30:00","10:45:00","11:00:00"];
var workernames = ["Kapper 1","Kapper 2"];
var workerids = ['148','196'];
var workerTimes = [];
workerTimes['148'] = ["10:00:00","10:15:00","10:30:00","10:45:00","11:00:00"];
workerTimes['196'] = ["10:00:00","10:15:00","10:30:00","10:45:00","11:00:00"];
var workerAppointments = [];
workerAppointments['148'] = ["10:00:00","10:15:00","10:30:00","10:45:00"];
workerAppointments['196'] = ["10:30:00","10:45:00"];
var appointmentTime = [];
appointmentTime['148'] = ["10:00:00"];
appointmentTime['196'] = ["10:15:00"];
var $elem = $("<table>",{'class':'table table-responsive table-bordered overview-table','border':'1'});
var $thead = $('<thead>',{}).appendTo($elem);
var $theadTR = $("<tr>",{}).appendTo($thead);
$("<th>",{'width':'50','html':'Tijd'}).appendTo($theadTR);
$.each(workernames,function(i)
{
$("<th>",{'html':workernames[i]}).appendTo($theadTR);
});
var $tbody = $("<tbody>",{'class':'overview_table_td'}).appendTo($elem);
$rowspan = 0;
$.each(shopTimeArray,function(i)
{
$tbodyTR = $("<tr>",{}).appendTo($tbody);
$tbodyTH = $("<th>",{'scope':'row','html':shopTimeArray[i].slice(0,-3)}).appendTo($tbodyTR);
$.each(workerids,function(j)
{
if(typeof(workerTimes[workerids[j]]) != "undefined" && $.inArray(shopTimeArray[i],workerTimes[workerids[j]]) !== -1 )
{
//console.log(appointmentTime[workerids[j]]);
if(shopTimeArray[i] == appointmentTime[workerids[j]])
{
$.each(workerAppointments[workerids[j]],function(y){
$rowspan++;
});
html = "appointment"+j;
} else {
html = '';
}
$tbodyTD = $("<td>",{'html':html,'rowspan':$rowspan}).appendTo($tbodyTR);
}
});
});
$(".overview-table").html($elem);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overview-table">
</div>
我试过像
这样的解决方案 if($rowSpan > 0) {
$rowSpan--;
} else {
add td
}
但上面的代码无法正常工作。
我想省略workerAppointments变量
中的单元格目前看起来很疲惫,
寻求帮助。