<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Table</title>
<link rel="stylesheet" href="dist/simpletable.css">
<style>
/*此处仅为该demo的显示样式,与 SimpleTable 无关紧要********start********/
body{color:rgb(19,155,173);font-family:"Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;}
.contaner{padding:20px;}
.text-center{text-align:center;}
small{font-size:75%;color:gray;}
.row{width:100%;}
[class^="col"] {padding:0 0.5% 1% 0.5%;float:left;}
.col3{width:24%;}
.col4{width:32%;}
.col6{width:49%;}
.col12{width:99%;}
.clr{clear:both;}
pre {display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#e3e3e3;border:1px solid #ccc;border-radius:4px;font-family: Menlo,Monaco,Consolas,"Courier New",monospace;}
pre code{padding:2px 4px;font-size:90%;color:#c7254e;border-radius:4px;text-shadow:0 0 10px rgba(0,0,0,0.3);}
ul{list-style:none;}
.table-responsive{overflow-x: auto;}
.btn{border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border:1px solid transparent;background-color:#3c8dbc;border-color:#367fa9;color:#fff;padding:6px 12px;cursor:pointer;}
.text-red{color:#F00 !important;}
/*此处仅为该demo的显示样式,与 SimpleTable 无关紧要********end********/
</style>
</head>
<body>
<div class="contaner">
<h1 class='text-center'>SimpleTable <small>V1.0</small></h1>
<h2 class='text-center'><small>一个基于 Jquery 的 Html5 简易表格样式插件</small></h2>
<h2 class='text-center'><small>Sam 2016.Apr</small></h2>
<h3>1. 主题</h3>
<div class="row">
<div class="col4">
<table id="SimpleTable1">
<thead>
<tr><th>default样式</th></tr>
</thead>
<tbody>
<tr><td>普通行</td></tr>
<tr class="tr-active"><td>鼠标经过/激活行</td></tr>
<tr class="tr-disable"><td>禁用行</td></tr>
<tr class="tr-disable tr-active"><td>禁用且激活行</td></tr>
</tbody>
<tfoot>
<tr><th>表格脚部(可无)</th></tr>
</tfoot>
</table>
</div>
<div class="col4">
<table id="SimpleTable2">
<thead>
<tr><th>primary样式</th></tr>
</thead>
<tbody>
<tr><td>普通行</td></tr>
<tr class="tr-active"><td>鼠标经过/激活行</td></tr>
<tr class="tr-disable"><td>禁用行</td></tr>
<tr class="tr-disable tr-active"><td>禁用且激活行</td></tr>
</tbody>
<tfoot>
<tr><th>表格脚部(可无)</th></tr>
</tfoot>
</table>
</div>
<div class="col4">
<table id="SimpleTable3">
<thead>
<tr><th>success样式</th></tr>
</thead>
<tbody>
<tr><td>普通行</td></tr>
<tr class="tr-active"><td>鼠标经过/激活行</td></tr>
<tr class="tr-disable"><td>禁用行</td></tr>
<tr class="tr-disable tr-active"><td>禁用且激活行</td></tr>
</tbody>
<tfoot>
<tr><th>表格脚部(可无)</th></tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col4">
<table id="SimpleTable4">
<thead>
<tr><th>info样式</th></tr>
</thead>
<tbody>
<tr><td>普通行</td></tr>
<tr class="tr-active"><td>鼠标经过/激活行</td></tr>
<tr class="tr-disable"><td>禁用行</td></tr>
<tr class="tr-disable tr-active"><td>禁用且激活行</td></tr>
</tbody>
<tfoot>
<tr><th>表格脚部(可无)</th></tr>
</tfoot>
</table>
</div>
<div class="col4">
<table id="SimpleTable5">
<thead>
<tr><th>warning样式</th></tr>
</thead>
<tbody>
<tr><td>普通行</td></tr>
<tr class="tr-active"><td>鼠标经过/激活行</td></tr>
<tr class="tr-disable"><td>禁用行</td></tr>
<tr class="tr-disable tr-active"><td>禁用且激活行</td></tr>
</tbody>
<tfoot>
<tr><th>表格脚部(可无)</th></tr>
</tfoot>
</table>
</div>
<div class="col4">
<table id="SimpleTable6">
<thead>
<tr><th>danger样式</th></tr>
</thead>
<tbody>
<tr><td>普通行</td></tr>
<tr class="tr-active"><td>鼠标经过/激活行</td></tr>
<tr class="tr-disable"><td>禁用行</td></tr>
<tr class="tr-disable tr-active"><td>禁用且激活行</td></tr>
</tbody>
<tfoot>
<tr><th>表格脚部(可无)</th></tr>
</tfoot>
</table>
</div>
</div>
<br />
<h3>2. 使用方法:</h3>
<ul>
<li>2.1. 添加CSS及JS文件<br />
<pre><code><link href="static/plugins/simpletable/simpletable.min.css" rel="stylesheet" type="text/css" /><br /><script src="static/plugins/simpletable/simpletable.min.js" type="text/javascript"></script></code></pre></li>
<li>2.2. 书写 Table Dom<br />
<pre><code><table id="SimpleTable"><br /> <thead><br /> <tr><th>...</th></tr><br /> </thead><br /> <tbody><br /> <tr><td>...</td></tr><br /> <tr><td>...</td></tr><br /> </tbody><br /> <tfoot><br /> <tr><th>...</th></tr><br /> </tfoot><br /></table></code></pre></li>
<li>2.3. 采用js方式生成:<br />
<pre><code>$('#SimpleTable').SimpleTable(<span class="text-red">options</span>);</code></pre></li>
</ul>
<br />
<h3>3. 非js方式生成:</h3>
<ul>
<li>3.1 朴素 SimpleTable : 为 table 添加 .simpletable 类即可。</li>
<li>3.2 激活状态: 为 tr 添加 .tr-active 类即可产生改行的激活状态。</li>
<li>3.3 禁用状态: 为 tr 添加 .tr-disable 类即可产生改行的禁用状态。</li>
<li>3.4 6种主题: 为 .simpletable 类添加 .tab-* 即可产生5种色彩主题(*可以为primary/success/info/warning/danger)。</li>
<li>3.5 无边框样式:为 .simpletable 类添加 .noborder 类可以产生无边框的表格效果。</li>
<li>3.6 极其简单的Dom: table 中可以仅仅含有 tr th td 等元素而不必含�