Tablecloth 是轻量的，它使用简单的方式将样式和行为添加到你的 HTML 表格元素中。
在你的 HTML 页面中简单地添加两行代码，你就可以得到样式化和可活动的表格，你的浏览用户将会喜欢它。
概览
表格通常被没有标准概念的开发者所滥用，并且在表格布局编码者和标准化之间已经形成了相关理论的课题。
HTML 中表格的重要性是它们所扮演的角色 - 显示列表数据。
Tablecloth 是只专门让表格的用法更适当的。
利用基于表格的布局将引起更多头痛的问题，因为它会自己布局。
在使用 Tablecloth 之前，请确认你没有使用表格在其它任何地方，除了列表数据。
特征
Tablecloth 用来显示格式正确的表格，并将样式和行为应用在其上。
它将搜索 HTML 源代码中的表格元素，并处理找到的每一个表格。
对了，这里不需要硬编码类名和 IDs，Tablecloth 将会自动添加。
然而，如果你愿意，你可以应用你自己的类名。
01. 添加偶数或奇数类名到行。
02. 为鼠标经过和移出状态添加经过和移出类名。
03. 如果设置为 True，Tablecloth 将高亮显示行或列（或者两者都显示）。
04. 如果设置为 True，Tablecloth 在鼠标点击时将添加选择状态；基于偏好选择行或列（或者两者都选择）；不选择只需要在页面任何地方点击一下即可。
05. Tablecloth 为你的升级留了余地；它可简单的进行编辑，在你点击表格单元格时，你可以使用你自己的代码。
用法
使用 Tablecloth 你需要格式正确的表格。
你的表格代码可能会像这样：
<table cellspacing="0" cellpadding="0">
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
下载 .zip 文件，解压并将名叫“tablecloth”的文件夹放在你的网站根目录下。
添加下面两行代码到你的 <head /> 标签内：
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
修改
外观修改在 CSS 文件 tablecloth.css 中进行。
Tablecloth 允许你为表格元素（th 和 td）设计偶数或奇数行、经过、移出、点击和选择状态的样式。
分别地，你可以选择是否高亮显示行、列或全部高亮，并且如果你可以让元素在点击时被选中。
完成这些只需要修改 3 个变量（highlightRows、highlightCols、selectable），它们在 tablecloth.js 文件中可以被找到。
设置值为 true 或 false。
官方网站：http://cssglobe.com/lab/tablecloth/
博文
没有评论:
发表评论