<!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 等元素而不必含�
一个基于 Jquery 的 Html5 表格插件，轻量、简单。.zip
版权申诉
5 浏览量
2024-02-12
22:14:04
上传
评论
收藏 104KB ZIP 举报
一个基于 Jquery 的 Html5 表格插件，轻量、简单。.zip （9个子文件） 
simpletable-master snapshot 
01_nojs.jpg 14KB 03_padding.jpg 24KB 02_color.jpg 65KB dist 
simpletable.css 9KB simpletable.min.js 4KB simpletable.min.css 7KB simpletable.js 7KB jquery.min.js 82KB
demo.html 21KB资源评论
博士僧小星
- 粉丝: 1924
- 资源: 5892
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
