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"
          },
          {
            "name": "Carnelian",
            "chakra": 2,
            "spirit": "Courage, willpower"
          },
          {
            "name": "Chrysocolla",
            "chakra": 4,
            "spirit": "Balance"
          },
          {
            "name": "Citrine",
            "chakra": 3,
            "spirit": "Gives courage to face life."
          },
          {
            "name": "Clear Calcite",
            "chakra": 7,
            "spirit": "Development"
          },
          {
            "name": "Denim Lapis",
            "chakra": 6,
            "spirit": "Enhances sense of personal responsability"
          },
          {
            "name": "Green Jade",
            "chakra": 4,
            "spirit": "Resistance and harmony"
          },
          {
            "name": "Grey Agate",
            "chakra": 2,
            "spirit": "Inner stability, composure, maturity"
          },
          {
            "name": "Howlite",
            "chakra": 7,
            "spirit": "Independence, care"
          },
          {
            "name": "Jet",
            "chakra": 1,
            "spirit": "Hope"
          },
          {
            "name": "Kyanite",
            "chakra": 5,
            "spirit": "Identity, life-fullfilling vocation"
          },
          .........完整代码请登录后点击上方下载按钮下载查看