Question

我需要根据td值填充表td的背景。下面是我为填写td单元格值而编写的示例代码。

applySchedules = function(schedules){
    $.map(schedules, function(value, index){			
        $('#'+value.start).css('background', 'green');
    });
}

var temp = [{start:9, end:10}, {start:13, end:14}]
applySchedules(temp);

tr {
   border-width:2px; 
   outline:solid;
}
td {
   border-width:2px; 
   width:60px; 
   outline:solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<table>
    <tr>
        <td id="8">8AM</td>
        <td id="9">9AM</td>
        <td id="10">10AM</td>
        <td id="11">11AM</td>
        <td id="12">12PM</td>
        <td id="13">1PM</td>
        <td id="14">2PM</td>
        <td id="15">3PM</td>
        <td id="16">4PM</td>
        <td id="17">5PM</td>
        <td id="18">6PM</td>
        <td id="19">7PM</td>
        <td id="20">8PM</td>
    </tr>	
</table>

基本上我将获得在给定日期占用的json数组时隙。当插槽跨度超过或小于1小时时出现问题。时间段分配在30分钟内。

赞{start:10,end:11.30},{start:12,end:12.30},{start:14.30,end:15}

寻找一些如何处理这类案件的指示。

示例输出：

Answer 1

我建议：

以这种方式增加跨度，即将有30分钟的项目
请勿使用编号为ID的＆gt;＆gt;这不是一个很好的方式

＆＃13;

$(function(){
   var applySchedules = function(schedules){
	   $.map(schedules, function( value,index){		
         
         var startHour = value.start.split(":")[0];
         var endHour = value.end.split(":")[0];
         var halfStart = value.start.split(":")[1];
         var halfEnd = value.end.split(":")[1];
         
         var startContainer = $('#time'+ padLeft( startHour, 2));
         var endContainer = $('#time'+ padLeft( endHour, 2));
		   
             if( parseInt( halfStart  )){
               startContainer.append( $("<div />").addClass("start") );
             }
             if( parseInt( halfEnd  )){
               endContainer.append( $("<div />").addClass("end") );
             }
         
          if( ( parseInt(endHour) - parseInt(startHour) ) > 0){
            for( var i = 1; i < parseInt(endHour) - parseInt(startHour); i++ ){
              
               $('#time'+ padLeft( (parseInt(startHour) + i)+"", 2)).append( $("<div />").addClass("full") );
            }
          }
         
	   });
   }
   function padLeft(str,size,padwith) {
	if(size <= str.length) {
		return str;
	} else {
		return Array(size-str.length+1).join(padwith||'0')+str
	}
   }
  
   
   var initTime = function(){
     for( var i =0; i< 24; i++ ){
       var $item;
       if( i < 12  ){
         $item = $("<td/>").text( padLeft(i+"",2)+":00 AM" );
       }else if( i == 12 ){
         $item = $("<td/>").text( padLeft( (i)+"",2)+":00 PM" );
       } else {
         $item = $("<td/>").text( padLeft( (i-12)+"",2)+":00 PM" );
       }
       $item.attr("id", "time" + padLeft(i+"",2));
       $("#timeContainer").append($item);
     }   
   }
   
   var temp=[{start:"9:00",end:"9:30"}, {start:"13:00",end:"13:30"}, { start:"14:00", end:"14:30"}, {start:"15:30", end:"18:30"}]
   initTime();
  applySchedules(temp);
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
tr{border-width:2px; outline:solid;}
td{border-width:2px; width:60px; outline:solid; position:relative;}
  div.start {
      width: 50%;
    background: green;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    z-index:-1;
}
div.end {
    width: 50%;
    background: green;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
  z-index:-1;
}
  div.full{
    width: 100%;
    background: green;
    position: absolute;
    height: 100%;
    top: 0;
    z-index:-1;
  }
  
</style>
<body>
	<table>
		<tr id="timeContainer">
		</tr>	
	</table>

</body>

＆＃13;

更新的答案 第一种代码方法

Answer 2

如果您坚持使用当前设置，我建议您使用CSS渐变：

...
$('#'+value.start).css('background','repeating-linear-gradient(to right, #00FF33, #00FF33 23px, #FFFFFF 23px, #FFFFFF 46px)');
...

46px是小提琴中<td>的宽度，这可能必须动态生成。后两个值是整个<td>宽度的一半，它创建的梯度仅覆盖整个<td>的一半。然后，您可以通过执行更复杂的数学将其拆分为更小的部分，但我建议您参考https://css-tricks.com/stripes-css/以获取有关此技巧的更多信息。

这是小提琴：

http://jsfiddle.net/85mJN/190/

Dynamicaly根据元素数组填充表td

2 个答案: