所学跟工作结合时---我用JS画了12个班级的座位表

来到铁人赛的最後一篇!
走到现在，人生中如果能学以致用，真的很幸福~虽然心中有过无数将网页开发结合到自己工作的想法，也有实作出来：

1. 动物狂欢节牌卡：将动物主题与代表乐器做成可以翻的牌卡们
2. 班级分组器：输入班级人数及一组几个人，就可以随机分好组
3. 读谱练习：按按钮会有五线谱中央Do到高音Do以随机的方式出现

但是在小学现场，处於具体运思期的孩子，看到实物的学习效果是比较好且印象比较深的，这也是为什麽老师们总是很用心地在设计实体的教具，实际摸到牌卡比起看到萤幕上的牌卡，那效果真的是天与地的差别。如果可以，我也会尽量想用实体的东西教学。如果说用网页开发架一个教学网站放置自己的教学历程，已经有很多开发好的社群或者部落格可以很好的呈现，还能让自己跟广大的社群观众们互动。

其实很多时候也只是靠着自己的直觉继续学习网页开发，对於工作能做什麽、可以做什麽，都没办法预先得知。

就在开学前夕，我看到这学期我接了12个班级的音乐课，开始画座位表时突然想到：

既然我一开始都是固定座号的座位
(每班的1号都是坐同个位子)
何不利用JS动态抽换内容的功能
将12个班级的座位表
用HTML画好表格後
JS负责抽换每班孩子的姓名就好了呢~

去年的此时我是接了16个班级的音乐课，我画了16次座位表。这次，我试试看用程序帮我完成这个工作!

HTML码建构表格结构：

<table border="1">
    <caption>一年甲班</caption>
	<tr>
	    <td data-index='30'>30</td>
	    <td data-index='15'>15</td>
	    <td data-index='25'>25</td>
	    <td data-index='10'>10</td>
	    <td data-index='20'>20</td>
	    <td data-index='5'>5</td>
		    　
	</tr>
		
	<tr>
	    <td data-index='29'>29</td>
	    <td data-index='14'>14</td>
	    <td data-index='24'>24</td>
	    <td data-index='9'>9</td>
	    <td data-index='19'>19</td>
	    <td data-index='4'>4</td>
		    　
	</tr>
		
	<tr>
	    <td data-index='28'>28</td>
	    <td data-index='13'>13</td>
	    <td data-index='23'>23</td>
	    <td data-index='8'>8</td>
	    <td data-index='18'>18</td>
	    <td data-index='3'>3</td>
		    　
	</tr>
		
	<tr>
	    <td data-index='27'>27</td>
	    <td data-index='12'>12</td>
	    <td data-index='22'>22</td>
	    <td data-index='7'>7</td>
	    <td data-index='17'>17</td>
	    <td data-index='2'>2</td>
		    　
	</tr>
		
        <tr>
	    <td data-index='26'>26</td>
	    <td data-index='11'>11</td>
	    <td data-index='21'>21</td>
	    <td data-index='6'>6</td>
	    <td data-index='16'>16</td>
	    <td data-index='1'>1</td>
		    　
	</tr>
</table>

JS码汇入班级学生姓名并抽换内容：

1. 以字串汇入学生姓名 名字间有空格
2. 将字串分割成拥有班级学生人数的阵列
3. 选出所有td标签
4. 将td标签的内容抽换成座号加上学生名字

const str = 'ooo xxx aaa bbb ...'
const arr = str.split(' ',26)
const td = document.querySelectorAll("td");
td.forEach(function (i) {
    i.innerHTML =`<h3>${i.dataset.index}</h3> <h2>${arr[i.dataset.index - 1]
}</h2>`;
});

实际上课一段时间後势必座位会调整，但一开始最初的固定号码座位，利用程序码完成，心里真的感受到

能学以致用，真好

写在铁人赛的最後一篇，谢谢看完我30天的告白，我与网页开发的故事会继续下去，相信你们也是:)~