javascript - 如何使表格中的空白单元格可点击并使用javascript使其在另一个表格上显示某些内容？

Question

这是一张图片来说明我的意思：

例如，单击 8 月 12 日的空间时，我希望将事件的事件和时间显示在下表中。
（事件和时间是预先定义的）

标签： javascripthtmlcss

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>