新 頭目時間表

.markdown

新 頭目時間表

A Pen by b2977053 on CodePen.

License.

index.html

<table class="main">
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="2">00:15</td>
			<td>肯恩特</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td rowspan="2">卡莫斯</td>
		</tr>
		<tr>
			<td>木拉卡</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td rowspan="2">02:00</td>
			<td>克價卡</td>
			<td rowspan="2">羅裴勒</td>
			<td rowspan="2">卡嵐達</td>
			<td rowspan="2">庫屯</td>
			<td>克價卡</td>
			<td>克價卡</td>
			<td>卡嵐達</td>
		</tr>
		<tr>
			<td>庫屯</td>
			<td>羅裴勒</td>
			<td>庫屯</td>
			<td>羅裴勒</td>
		</tr>
		<tr>
			<td rowspan="2">11:00</td>
			<td rowspan="2">卡嵐達</td>
			<td>克價卡</td>
			<td>克價卡</td>
			<td>卡嵐達</td>
			<td>奧平</td>
			<td>卡嵐達</td>
			<td>克價卡</td>
		</tr>
		<tr>
			<td>庫屯</td>
			<td>羅裴勒</td>
			<td>庫屯</td>
			<td>庫屯</td>
			<td>庫屯</td>
			<td>羅裴勒</td>
		</tr>
		<tr>
			<td rowspan="2">14:00</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2"></td>
			<td rowspan="2">卡莫斯</td>
		</tr>
    <tr></tr>
		<tr>
			<td rowspan="2">15:00</td>
			<td>克價卡</td>
			<td>卡嵐達</td>
			<td rowspan="2"></td>
			<td>克價卡</td>
			<td>羅裴勒</td>
			<td rowspan="2">奧平</td>
			<td rowspan="2">貝爾</td>
		</tr>
		<tr>
			<td>庫屯</td>
			<td>羅裴勒</td>
			<td>羅裴勒</td>
			<td>卡嵐達</td>
		</tr>
		<tr>
			<td rowspan="2">19:00</td>
			<td rowspan="2"></td>
			<td rowspan="2">貝爾</td>
			<td>克價卡</td>
			<td rowspan="2">羅裴勒</td>
			<td>克價卡</td>
			<td>克價卡</td>
			<td>卡嵐達</td>
		</tr>
		<tr>
			<td>庫屯</td>
			<td>庫屯</td>
			<td>羅裴勒</td>
			<td>庫屯</td>
		</tr>
		<tr>
			<td rowspan="2">22:30</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2">卡莫斯</td>
			<td rowspan="2"></td>
			<td rowspan="2">卡莫斯</td>
		</tr>
    <tr></tr>
		<tr>
			<td rowspan="2">23:30</td>
			<td>克價卡</td>
			<td>克價卡</td>
			<td>卡嵐達</td>
			<td>卡嵐達</td>
			<td>肯恩特</td>
			<td rowspan="2"></td>
			<td rowspan="2">奧平</td>
		</tr>
		<tr>
			<td>庫屯</td>
			<td>羅裴勒</td>
			<td>羅裴勒</td>
			<td>庫屯</td>
			<td>木拉卡</td>
		</tr>
	</tbody>
</table>

script.js

	/*
	* getWeekDatas 函數
	* 此函數用於獲取一週的日期數據，
	* 並將當天的日期標記為 "(今天)"
	*/
	function getWeekDatas() {
		var today = new Date();
		var dayOfWeek = today.getDay();

		var days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
		days[dayOfWeek] = days[dayOfWeek] + ' (今天)';
		return days;
	}
	/*
	* getThIndex 函數
	* 此函數接受一個 th 元素作為參數 (用於設置主表格的標題)
	* 返回該元素在其父元素中的索引
	*/
	function getThIndex(thElement) {
		var siblings = Array.prototype.slice.call(thElement.parentNode.children);
		return siblings.indexOf(thElement);
	}
	/*
	* setMainTableHeater 函數
	* 此函數用於設置主表格的標題
	* 它首先獲取一週的日期數據
	* 然後遍歷所有的 th 元素
	* 如果 th 元素是其父元素的第一個子元素，則不進行任何操作
	* 否則，它將創建一個新的 span 元素，並將其文本內容設置為對應的日期
	* 最後，它將新創建的 span 元素添加到 th 元素中
	*/
	function setMainTableHeater() {
		var weekDatas = getWeekDatas();

		var thElements = document.querySelectorAll('.main th');
		thElements.forEach(function(th) {
			if (th === th.parentElement.firstElementChild) {

			}else{
				var index = getThIndex(th);
				if(index === 7){index=0;}
				var span = document.createElement('span');
				span.textContent = weekDatas[index];
				th.appendChild(span);
			}
		});
	}
	window.onload = function() {
		setMainTableHeater();
	}

style.css

.main {
	width: 90%;
	margin: 20px auto;
	font-family: "Helvetica", "Arial","LiHei Pro","標楷體","微軟正黑體", sans-serif;
	font-size: larger;
  }
  table {
	border-spacing: 0;
	width: 100%;
  }
  tr {
	text-align: center;
	height: 25px;
  }
  th {
	padding: 10px;
	font-family: "標楷體", sans-serif;
  }
  table tbody tr:nth-child(4n+1), table tbody tr:nth-child(4n+2){
	background-color: rgba(30, 144, 255, 0.2);
  }
  table thead {
	background-color: rgba(30, 144, 255, 0.8);
	color: white;
  }
  table thead th:first-child {
	border-radius: 5px 0 0 0;
  }
  table thead th:last-child {
	border-radius: 0 5px 0 0;
  }
  table tbody tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
  }
  
  table tbody tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
  }