<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var start = 6 * 60; // 開始時間(分)
var end = 28 * 60; // 終了時間(分)
var base_range = end - start; // 範囲時間
var base_width = 300; // 表示幅
var block = base_width / (base_range/10); // 10分単位の幅
// ***********************************************
// 時間範囲表示関数
// ***********************************************
function setRange(id,strTime1,strTime2) {
var parts = strTime1.split(":");
var h = parseInt( parts[0] ); // 時間部分
var m = parseInt( parts[1] ); // 分部分
m = (h*60 - start + m)/10; // start からの位置
start_pos = m * block; // 指定時間の開始位置
parts = strTime2.split(":");
h = parseInt( parts[0] ); // 時間部分
m = parseInt( parts[1] ); // 分部分
m = (h*60 - start + m)/10;
end_pos = m * block;
// 二つ目は幅に変換
block_width = end_pos - start_pos;
// 幅を表現する BOX の開始と幅を設定( jQuery である必要はありません )
$("#" + id).css({ "left": start_pos+"px", "width": block_width + "px" });
}
$(function() {
setRange("timebar0001","6:00", "7:00");
setRange("timebar0002","8:00", "10:00");
setRange("timebar0003","11:00", "14:00");
setRange("timebar0004","15:00", "19:00");
setRange("timebar0005","20:00", "25:00");
setRange("timebar0006","20:00", "27:00");
});
</script>
<style type="text/css">
.rangebox {
width:100%;
height: 35px;
background-color:#e0e0e0;
position: relative;
}
.rangebox div {
position: absolute;
background-color:#ff0000;
height: 35px;
}
#lboxtable * {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
font-size: 16px;
}
#lboxtable table {
table-layout: fixed;
width:600px;
border-collapse: collapse;
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #FFFFFF;
}
#lboxtable td {
padding: 5px;
border-style: solid;
border-color: #000000;
border-width: 1px;
/* white-space: nowrap; */
}
</style>
<div id="lboxtable">
<table>
<tbody>
<tr>
<td style='width:100px;'>氏名</td>
<td style='width:300px;'>時間 ( 6:00 〜 28:00 )</td>
<td>開始</td>
<td>終了</td>
</tr>
<tr>
<td>浦岡 友也1</td>
<td>
<div class="rangebox">
<div id="timebar0001"></div>
</div>
</td>
<td>6:00</td>
<td>7:00</td>
</tr>
<tr>
<td>浦岡 友也2</td>
<td>
<div class="rangebox">
<div id="timebar0002"></div>
</div>
</td>
<td>8:00</td>
<td>10:00</td>
</tr>
<tr>
<td>浦岡 友也3</td>
<td>
<div class="rangebox">
<div id="timebar0003"></div>
</div>
</td>
<td>11:00</td>
<td>14:00</td>
</tr>
<tr>
<td>浦岡 友也4</td>
<td>
<div class="rangebox">
<div id="timebar0004"></div>
</div>
</td>
<td>15:00</td>
<td>19:00</td>
</tr>
<tr>
<td>高田 冬美1</td>
<td>
<div class="rangebox">
<div id="timebar0005"></div>
</div>
</td>
<td>20:00</td>
<td>25:00</td>
</tr>
<tr>
<td>高田 冬美2</td>
<td>
<div class="rangebox">
<div id="timebar0006"></div>
</div>
</td>
<td>20:00</td>
<td>27:00</td>
</tr>
</tbody>
</table>
</div>
