如何使用 javascript 使表格中的空白單元格可單擊並使其在另一個表格上顯示某些內容？

Question

這是一張圖片來說明我的意思：

例如，單擊 8 月 12 日的空間時，我希望將事件的事件和時間顯示在下表中。
（事件和時間是預先定義的）

Answer 1

請試試這個。

 function showevent(){ var evtable = document.getElementById("eventtable"); evtable.classList.add("active"); var row= evtable.insertRow(1); row.insertCell(0).innerHTML = "Aug 12 2020"; row.insertCell(1).innerHTML = "Javascript"; row.insertCell(2).innerHTML = "10am"; row.insertCell(3).innerHTML = "12pm"; }

 table,td,th{ border:1px solid #111; padding:10px; }.event{display:none;} #eventtable{display:none;margin-top:10px;} #eventtable.active{display:table;}

 <table id="calendar"> <tr><td colspan="7" style="text-align:center;">August 2020</td> <tr class="weekdays"> <th scope="col">Sun</th> <th scope="col">Mon</th> <th scope="col">Tue</th> <th scope="col">Wed</th> <th scope="col">Thu</th> <th scope="col">Fri</th> <th scope="col">Sat</th> </tr> <tr class="days"> <td class="day other-month"> <div class="date">31</div> </td> <td class="day other-month"> <div class="date"></div> </td> <td class="day other-month"> <div class="date"></div> </td> <td class="day other-month"> <div class="date"></div> </td> <td class="day other-month"> <div class="date"></div> </td> <td class="day"> <div class="date">1</div> </td> <td class="day"> <div class="date">2</div> </td> </tr> <tr> <td class="day"> <div class="date">3</div> </td> <td class="day"> <div class="date">4</div> </td> <td class="day"> <div class="date">5</div> </td> <td class="day"> <div class="date">6</div> </td> <td class="day"> <div class="date">7</div> </td> <td class="day"> <div class="date">8</div> </td> <td class="day"> <div class="date">9</div> </td> </tr> <tr> <td class="day"> <div class="date">10</div> </td> <td class="day"> <div class="date">11</div> </td> <td class="day" id="onetwo" onClick="showevent()">12 </td> <td class="day"> <div class="date">13</div> </td> <td class="day"> <div class="date">14</div> </td> <td class="day"> <div class="date">15</div> </td> <td class="day"> <div class="date">16</div> </td> </tr> <tr> <td class="day"> <div class="date">17</div> </td> <td class="day"> <div class="date">18</div> </td> <td class="day"> <div class="date">19</div> </td> <td class="day"> <div class="date">20</div> </td> <td class="day"> <div class="date">21</div> </td> <td class="day"> <div class="date">22</div> </td> <td class="day"> <div class="date">23</div> </td> </tr> <tr> <td class="day"> <div class="date">24</div> </td> <td class="day"> <div class="date">25</div> </td> <td class="day"> <div class="date">26</div> </td> <td class="day"> <div class="date">27</div> </td> <td class="day"> <div class="date">28</div> </td> <td class="day"> <div class="date">29</div> </td> <td class="day"> <div class="date">30</div> </td> </tr> <tr> </table> <table id="eventtable"> <tr> <th>Day</th> <th>subject name</td> <th>start time</td> <th>end time</td> <tr> </table>