javascript - 用动画中的幻灯片替换行点击时卡片的内容

Question

这是我的代码笔： https ://codepen.io/liamdthompson/pen/YJyaor

<div class="card contactcard">
 <table class="table table-borderless table-hover">                               
   <tbody>
     <tr>
       <th  scope="row"  >1</th>
       <td>Mark Jones</td>
       <td>Yesterday, 6:40 pm</td>
     </tr>
     <tr>
       <th  scope="row" >2</th>
       <td>Mark Jones</td>
       <td>Yesterday, 6:40 pm</td>
     </tr>
     <tr>
       <th  scope="row" >3</th>
       <td>Mark Jones</td>
       <td>Yesterday, 6:40 pm</td>
     </tr>

    </tbody>
   </table>

它是卡内的引导表。这显示了联系表单提交。该视图提取名称和提交日期，但我希望其余的提交内容在点击时显示出来。

我希望这样当用户点击一行时，表格消失，用户可以看到一张包含表单提交其余部分的空白卡。希望这可以伴随动画中的幻灯片，看起来像是从右到左“推”桌子。希望这是有道理的！

标签： javascriptreplacehtml-tableonclick