如何通过jQuery将网格替换为列表视图？

我有一个Pinterest样式的网格视图，我需要在单击按钮时将网格替换为表视图（如下所示）（单击网格按钮时反之亦然）

我已经查过了，但找不到任何合适的例子或文档。所以我不知道该怎么做。非常感谢您的帮助

HTML：按钮

<a id="#grid"><i class="fa fa-th-large" aria-hidden="true"></i></a>
<a id="#list"><i class="fa fa-list" aria-hidden="true"></i></a> 

HTML:Pinterest

日期

---

理想的做法是，除了容器上的一类

砌体

或

表

之外，两个视图的HTML保持相同

---

使用

display:table

、

display:table row

和

display:table cell

CSS触发表格样式设置。

是的，我知道这一点。我只是把它放进去以示说明。：）谢谢你的帮助。

$(document).ready(function() {
    $('#list').click(function(event){event.preventDefault();$('.pinGrid .pin').addClass('list-items');});
    $('#grid').click(function(event){event.preventDefault();$('.pinGrid .pin').removeClass('list-items');$('.pinGrid .pin').addClass('');});
}); 

  <div class="child_vac pin" id="">
    <div class="pull-right intrest-box">
      <input type="checkbox" class="faChkRnd like" name=""></div>
     <p class="pull-left">date</p>
      <h2 class="job-title text-center">  </h2>
      <p class="info-text text-center" ><b></b></p><p class="box-requirements">

      </p>
      <div class="text-center">
        <p class="card-title"> <a href="#moreinfo"  data-id="" class="moreinfo">More Information</a></p>
      </div>
    </div>