要素の配列に基づいてテーブルを動的に塗りつぶす

td値に基づいてテーブルtdの背景を埋める必要があります。以下は、tdセルの値を書き込むために書いたサンプルコードです。要素の配列に基づいてテーブルを動的に塗りつぶす

applySchedules = function(schedules){ 
 
    $.map(schedules, function(value, index){ \t \t \t 
 
     $('#'+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> \t 
 
</table>

基本的に私は、特定の日のために占有されているタイムスロットのJSON配列を取得します。この問題は、スロットの長さが1時間以上に及ぶ場合に発生します。タイムスロットは複数の30分で割り当てられます。

例これらの種類を処理する方法をいくつかのポインタを探してい

{start:10,end:11.30},{start:12,end:12.30},{start:14.30,end:15}ように。

サンプル出力：

出典

2016-06-21 Sudheer Eega

各ブロックは迅速な提案のために30分 –

私は助言する：あなたの30分の項目

があるだろうというスパンようの

増加数は、単に番号をIDを使用しないでください - >それは

$(function(){ 
 
    var applySchedules = function(schedules){ 
 
\t $.map(schedules, function(value,index){ \t \t 
 
      
 
     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)); 
 
\t \t  
 
      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")); 
 
      } 
 
      } 
 
      
 
\t }); 
 
    } 
 
    function padLeft(str,size,padwith) { 
 
\t if(size <= str.length) { 
 
\t \t return str; 
 
\t } else { 
 
\t \t return Array(size-str.length+1).join(padwith||'0')+str 
 
\t } 
 
    } 
 
    
 
    
 
    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); 
 
    
 
})

<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> 
 
\t <table> 
 
\t \t <tr id="timeContainer"> 
 
\t \t </tr> \t 
 
\t </table> 
 

 
</body>

非常に良い方法ではありません10

UPDATED ANSWER コード

出典

2016-06-21 09:05:33 xAqweRx

おかげロリーMcCrossan＆xAqweRxなるようtd' 'の数を増加させる場合：ここで

はフィドルです。ちょうど私が8時から8時まで述べた時間を説明するために。しかし、その24時間のスロットの選択とユーザーは1時間のスパンでそれを望んで、長いスクロールを避ける。そして、タイムスロットが1時間以上、すなわち{start：12.30、end：15}を占めるときは、複数のtdに色を付ける必要があります。 –

@SudheerEega時間が12.30の場合、どのセルに色付けする必要がありますか？ 12:00または13:00？ – xAqweRx

セル12.00とtd後半（50％幅）の着色が必要です。 –

にいくつかの最初のアプローチ、あなたの現在の設定を使用しての断固としている場合、私はCSSグラデーションを使用することをお勧めかもしれません：

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

46pxですこれはおそらく動的に生成する必要があります。 2番目の2つの値は、<td>全体の半分のみをカバーするグラデーションを作成する<td>全体の幅の半分です。より複雑な数学を使ってこれを小さなセクションに分けることができますが、このトリックの詳細についてはhttps://css-tricks.com/stripes-css/を参照することをお勧めします。

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

出典

2016-06-21 09:14:24

要素の配列に基づいてテーブルを動的に塗りつぶす

答えて

関連する問題