isomorphic-table-cards实现卡片与表格视图模式切换排序效果代码-html代码-BFW代码库

isomorphic-table-cards实现卡片与表格视图模式切换排序效果代码

代码语言：html

所属分类：表格

代码描述：isomorphic-table-cards实现卡片与表格视图模式切换排序效果代码，可根据json数据自动生成表格或卡片并支持数据动态排序。

代码标签： isomorphic-table-cards 卡片表格视图模式切换排序

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/isomorphic-table-cards.css">
<style>
    html{
        color: #0f0f0f;
    background-color: #fafafa;
}
body{
        font-family: 'Roboto',arial;
        margin: 0;
        padding: 20px 20px 20px 50px;
    background-image: url(bg0.png);
    background-repeat: repeat-y;
}

a {
    text-decoration: none;
    font-weight: 600;
    color: #259DCB;
}
a:hover {
        color: navy;
}
h1{
        margin: 0 0 30px 0;
}
.github{
        display: inline-block;
        position: relative;
        top: 10px;
        left: 10px;
}
#opts{
        position: absolute;
        top: 10px;
        right: 20px;
        color: grey;
}
#opts > div{
        padding:5px;
}

.chakra1{
        background-color: #ffebee;
        border: solid 2px #f44336;
}
.chakra2{
        background-color: #fff3e0;
        border: solid 2px #ff9800;
}
.chakra3{
        background-color: #fff8e1;
        border: solid 2px #ffc107;
}
.chakra4{
        background-color: #e8f5e9;
        border: solid 2px #4caf50;
}
.chakra5{
        background-color: #e0f7fa;
        border: solid 2px #00bcd4;
}
.chakra6{
        background-color: #e8eaf6;
        border: solid 2px #3f51b5;
}
.chakra7{
        background-color: #f3e5f5;
        border: solid 2px #9c27b0;
}
</style>
    <script>
        var data = [
          {
            "name": "Amazonite",
            "chakra": 4,
            "spirit": "Self-determination"
          },
          {
            "name": "Amber",
            "chakra": 3,
            "spirit": "Makes carefree"
          },
          {
            "name": "Amethyst",
            "chakra": 7,
            "spirit": "Alertness, justice, inner peace",
            "body": "Good for the skin; alleviates pain, tension and lowers high blood pressure."
          },
          {
            "name": "Angelite",
            "chakra": 5,
            "spirit": "Stability, stamina"
          },
          {
            "name": "Aquamarine",
            "chakra": 5,
            "spirit": "Farsightedness, foresight"
          },
          {
            "name": "Aragonite",
            "chakra": 7,
            "spirit": "Stable development"
          },
          {
            "name": "Aventurine",
            "chakra": 4,
            "spirit": "Easy-goingness"
          },
          {
            "name": "Black Agate",
            "chakra": 1,
            "spirit": "Reformation, reflection, maturity"
          },
          {
            "name": "Black Obsidian",
            "chakra": 1,
            "spirit": "Resolution"
          },
          {
            "name": "Blue Lace Agate",
            "chakra": 5,
            "spirit": "Elegance, mental agility, dynamism"
          },
          {
            "name": "Blue Quartz",
            "chakra": 5,
            "spirit": "Imperturbability"
.........完整代码请登录后点击上方下载按钮下载查看