通过jQuery动态生成的html无法正常工作

时间:2017-06-15 06:17:44

标签: javascript jquery html

我通过jquery生成动态html,当我使用rowspan而不是工作正常时。

预期产出:

enter image description here

我的当前代码:

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变量

中的单元格

目前看起来很疲惫,

寻求帮助。

0 个答案:

没有答案