Tablecloth:美化表格的 javascript应用

表格正在被滥用，尤其是对一些不太严谨的网页设计者来说，表格到底应该作用于哪些地方，这也是一个一直存在争议的问题。

但有一点是毫不争议的，表格在html中 最大的用处是用来展示表格数据。但普通的HTML表格并不能达到一个良好的用户体验，一堆无聊的数据死板的排列在一堆更死板的边框里 面，Tablecloth可以很好的为你解决这个问题。

Tablecloth是一个javascript应用， 用来美化你的表格，它的功能包括：

1. 给奇偶数行设定不同的背景颜色。
2. 高亮显示选定状态下的当前行或当前列。
3. 高亮显示被选定表单格元，或被选定表单格元的行或列。
4. 高亮显示鼠标悬浮时背景颜色，跟高亮被选状态是一样的。当然，你应该给不同的状态设定不同的 颜色。通常建议给悬浮设置淡一点的颜色，而选定状态则设置深色，这样，更能集中用户的注意力。

要使用Tablecloth,可以点击这里下载。 下载后将得到tablecloth.js和tablecloth.CSS两个文件，上传到你的服务器，然后在 你的网页文件的和标签之间加入下面的代码:

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>


控制表格的样式

table, td{font:100% Arial, Helvetica, sans-serif; }
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td{background:#e5f1f4;}
 
/* tablecloth styles */
 
tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}
 
th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}
 
td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;
color:#555;}
 
/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}

js主要设置：

// if set to true then mouseover a table cell will highlight
entire column (except sibling headings)
//如果设置成真的，鼠标移动到单个表格将会使与之相关的交叉垂直的表格高亮
 
    var highlightCols = true;
 
    // if set to true then mouseover a table cell will highlight
entire row(except sibling headings)
//如果设置成真的，鼠标移动到单个表格将会使与之相关的一排表格高亮
 
    var highlightRows = false;    
 
    // if set to true then click on a table sell will select row
or column based on config
//如果设置成真的，鼠标点击到单个表格将会使与之相关的交叉垂直的表格高亮
    var selectable = true;
 
    // this function is called when
    // add your own code if you want to add action
    // function receives object that has been clicked
//给没个表格点击写上函数，丰富功能用。
    this.clickAction = function(obj){
        //alert(obj.innerHTML);
 
    };

 

具体介绍和使用请看该工具的原页面