草窟设计

http://franca.exofire.net/jq/colorize

Coloriza 是一个Jquery 插件，可以为表格的行添加背景颜色，鼠标动作后为行、列增加高亮效果。你可以为很多行、列填色，只要你愿意。再从点击已经填色的行、列就可以还原表格本色。

怎么使用？

使用默认设置（colorizes a row）
$(‘#yourTableId’).colorize() ;

其他设置和参数:

altColor : alternate row background color. The default is ‘#ECF6FC’, ‘none’ can be used for no alternate background color.交替行的背景颜色。默认值为’＃ECF6FC’，’none’ 可替代的背景颜色使用。
bgColor : background color (The default background color is white).背景颜色（默认背景颜色为白色）。
hoverColor : background color when you hover a mouse over a row. The default is ‘#BCD4EC’.背景颜色当鼠标经过行。默认值为’＃BCD4EC’。
hoverClass: style class for mouseover; takes precedence over hoverColor property为鼠标经过样式类;hoverColor优先
hiliteColor : row highlight color. The default color is ‘yellow’. ‘none’ can be used to disable highlighting.行高亮颜色。默认的颜色是’黄色’。 ‘none’可以用来取消高亮。
hiliteClass : style class to be used to highlight a row or a column, takes precedence over the hiliteColor setting.样式类可用于强调一行或一列，hiliteColor设置优先。
columns : true/false/’hover’/'rowHover’ – 默认 ‘false’. 如果 ‘true’,列高亮. 如果是 ‘hover’, a column is highlighted on mouseover鼠标经过时列高亮, but does not respond to clicking但是点击没有效果. 相反, a row is highlighted when clicked一行被点击时候高亮. 如果是 ‘rowHover’, a row is highlighted on mouseover鼠标经过时行高亮, and a column is highlighted on click点击后列高亮.
oneClick : true/false – Allows only one row or column to be highlighted at a time. A click on a new row/column cancels the current highlight. The default is false.true/false-只允许一行或一列加以高亮每次。点击新行/列取消当前的高亮效果。默认值为false。

banColumns :[]- Prevents certain columns from being highlighted when clicked, and also on mouseover. Supply an array of column indices as an argument. A value of ‘last’ can be used to ban the last column.可以实现被点击或鼠标经过时某些列不高亮，提供一个数组作为参数列指数。值为’last’可以用来禁止的最后一列。

banDataClick :true/false – If true, you can only click on table header rows. The default is false.如果‘true’，你只能点击表格标题行。默认值为false。
ignoreHeaders :true/false – If true, header rows are not colorized. (no striping). The default is true.如果‘true’，头行不彩色。（不分段）。默认值为true。

nested :true/false . The default is false. Use it for more consistent striping if a table contains nested tables.默认值为false。使用更一致的条带，如果一个表包含嵌套表。

示例：

The order of parameters is not important.
$(‘#yourTableId’).colorize({bgColor:’#EAF6CC’, hoverColor:’green’, hiliteColor:’red’});
$(‘#yourTableId’).colorize({ oneClick:true});
$(‘#yourTableId’).colorize({columns:true, banColumns :[0,1]});
$(‘#yourTableId’).colorize({ hiliteClass:’myStyle’});

没有高亮:
$(‘#yourTableId’).colorize( { hiliteColor:’none’ } );

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" > <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Jquery Colorize Plugin Demo</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script> <script type="text/javascript"> /** * jQuery.colorize * Copyright (c) 2008-2009 Eric Karimov - ekarim57(at)gmail(dot)com | http://franca.exofire.net/jq/ * Dual licensed under MIT and GPL. * Date: 7/02/2009 * * @projectDescription Table colorize using jQuery. * http://franca.exofire.net/jq/colorize * * @author Eric Karimov, contributor Aymeric Augustin * @version 1.5.1 * * @param {altColor, bgColor, hoverColor, hoverClass, hiliteColor, hiliteClass, oneClick, columns, banColumns} * altColor : alternate row background color, 'none' can be used for no alternate background color * bgColor : background color (The default background color is white). * hoverColor : background color when you hover a mouse over a row * hoverClass: style class for mouseover; takes precedence over hoverColor property; may slow down performance in IE * hiliteColor : row highlight background color, 'none' can be used for no highlight * hiliteClass: style class for highlighting a row or a column; takes precedence over the hiliteColor setting * oneClick : true/false(default) - if true, clicking a new row reverts the current highlighted row to the original background color * columns : true/false/'hover' - The default is false. if true, highlights columns instead of rows. If the value is 'hover', * a column is highlighted on mouseover, but does not respond to clicking. Instead, a row is highlighted when clicked. * banColumns : [] - columns not to be highlighted or hovered over; supply an array of column indices, starting from 0; 'last' can be used * to ban the last column * @return {jQuery} Returns the same jQuery object, for chaining. * * @example $('#tbl1').colorize(); * * @$('#tbl1').colorize({bgColor:'#EAF6CC', hoverColor:'green', hiliteColor:'red', columns:true, banColumns:[4,5,'last']}); * * @$('#tbl1').colorize({ columns : 'hover', oneClick:true}); * All the parameters are optional. */ jQuery.fn.colorize = function(params) { options = { altColor: '#ECF6FC', bgColor: '#fff', hoverColor: '#BCD4EC', hoverClass:'', hiliteColor: 'yellow', hiliteClass:'', oneClick: false, columns: false, banColumns: [] }; jQuery.extend(options, params); var colorHandler = { addHoverClass: function(){ this.origColor = this.style.backgroundColor; this.style.backgroundColor=''; jQuery(this).addClass(options.hoverClass); }, addBgHover:function (){ this.origColor = this.style.backgroundColor; this.style.backgroundColor= options.hoverColor; }, removeHoverClass: function(){ jQuery(this).removeClass(options.hoverClass); this.style.backgroundColor=this.origColor; }, removeBgHover: function(){ this.style.backgroundColor=this.origColor; }, checkHover: function() { if (!this.onfire) this.hover(); }, checkHoverOut: function() { if (!this.onfire) this.removeHover(); }, highlight: function() { if(options.hiliteClass.length>0 || options.hiliteColor != 'none') { if(!this.onfire & options.columns=='hover') this.origColor = this.style.backgroundColor; this.onfire = true; if(options.hiliteClass.length>0){ this.style.backgroundColor=''; jQuery(this).addClass(options.hiliteClass).removeClass(options.hoverClass); } else if (options.hiliteColor != 'none') { this.style.backgroundColor= options.hiliteColor; } } }, stopHighlight: function() { this.onfire = false; this.style.backgroundColor = (this.origColor)?this.origColor:''; jQuery(this).removeClass(options.hiliteClass).removeClass(options.hoverClass); } } function processCells (cells, idx, func) { var colCells = getColCells(cells, idx); jQuery.each(colCells, function(index, cell2) { func.call(cell2); }); function getColCells (cells, idx) { var arr = []; for (var i = 0; i < cells.length; i++) { if (cells[i].cellIndex == idx) arr.push(cells[i]); } return arr; } } function processAdapter(cells, cell, func) { processCells(cells, cell.cellIndex, func); } var clickHandler = { toggleColumnClick : function (cells) { var func = (!this.onfire) ? colorHandler.highlight : colorHandler.stopHighlight; processAdapter(cells, this, func); }, toggleRowClick: function(cells) { row = jQuery(this).parent().get(0); if (!row.onfire) colorHandler.highlight.call(row); else colorHandler.stopHighlight.call(row); }, oneClick : function (cell, cells, indx){ if (cells.clicked != null){ if (cells.clicked == indx) // repeat the same set click { this.stopHilite(); cells.clicked = null; // set was not selected } else{ this.stopHilite(); this.hilite.call(cell); } } else if (cells.clicked == null) { this.hilite.call(cell); } }, oneColumnClick : function (cells) { var indx = this.cellIndex; clickHandler.hilite= hilite; clickHandler.stopHilite = stopHilite; clickHandler.oneClick (this, cells, indx); function stopHilite(){ processCells(cells, cells.clicked, colorHandler.stopHighlight); } function hilite(){ processAdapter(cells, this, colorHandler.highlight); cells.clicked = indx; } }, oneRowClick : function (cells) { var row = jQuery(this).parent().get(0); var indx = row.rowIndex; clickHandler.hilite= hilite; clickHandler.stopHilite = stopHilite; clickHandler.oneClick (this, cells, indx); function stopHilite(){ colorHandler.stopHighlight.call(clickHandler.tbl.rows[cells.clicked]); // delete the selected row } function hilite (){ colorHandler.highlight.call(row); // the current row is set to select cells.clicked = indx; //the current row is recorded } } } function checkBan() { return (jQuery.inArray(this.cellIndex, options.banColumns) != -1) ; } function attachHoverHandler(){ this.hover = optionsHandler.hover; this.removeHover = optionsHandler.removeHover; } function handleColumnHoverEvents(cell, cells){ attachHoverHandler.call (cell); cell.onmouseover = function() { if (checkBan.call(this)) return; processAdapter(cells, this, colorHandler.checkHover); } cell.onmouseout = function() { if (checkBan.call(this)) return; processAdapter(cells, this, colorHandler.checkHoverOut); } } function handleRowHoverEvents(cell, cells){ row = jQuery(cell).parent().get(0); attachHoverHandler.call (row); row.onmouseover = colorHandler.checkHover ; row.onmouseout = colorHandler.checkHoverOut ; } var optionsHandler ={ getHover: function(){ if(options.hoverClass.length>0){ this.hover = colorHandler.addHoverClass; this.removeHover = colorHandler.removeHoverClass; } else{ this.hover = colorHandler.addBgHover; this.removeHover = colorHandler.removeBgHover; } }, getRowClick : function (){ if(options.oneClick) return clickHandler.oneRowClick; else return clickHandler.toggleRowClick; }, getColumnClick : function (){ if(options.oneClick) return clickHandler.oneColumnClick; else return clickHandler.toggleColumnClick; } } var rowHandler = { handleHoverEvents : handleRowHoverEvents, clickFunc : optionsHandler.getRowClick() } var colHandler = { handleHoverEvents : handleColumnHoverEvents, clickFunc : optionsHandler.getColumnClick() } return this.each(function() { if (options.altColor!='none') { jQuery(this).find('tr:odd').css('background', options.bgColor); jQuery(this).find('tr:even').css('background', options.altColor); } if (jQuery(this).find('thead tr:last th').length > 0) var cells = jQuery(this).find('td, thead tr:last th'); else var cells = jQuery(this).find('td,th'); cells.clicked = null; if (jQuery.inArray('last', options.banColumns) != -1){ if(this.rows.length>0){ options.banColumns.push(this.rows[0].cells.length-1); } } optionsHandler.getHover(); clickHandler.tbl = this; if(options.columns){ var handler = colHandler; if(options.columns=='hover') handler.clickFunc = optionsHandler.getRowClick(); } else{ var handler = rowHandler; } jQuery.each(cells, function(i, cell) { handler.handleHoverEvents (this, cells); this.onclick = function() { if(checkBan.call(this)) return; handler.clickFunc.call(this, cells); } }); }); } </script> <script> $(document).ready(function(){ $("#tbl1").colorize(); $('#tbl2').colorize( {columns:true, oneClick:true}); }); </script> <style> body {margin-left:200px;} table {margin-top:10px;} table, tr, td, th { border-style:solid; border-width:1px; border-color:#C6C3C6; border-collapse:collapse; } td, th {padding:5px 5px;text-align:right;} h3 {color:blue;} p {font-family:Arial,Helvetica;} </style> </head> <body> <h3>Jquery Colorize Plugin Demo </h3> <p>http://franca.exofire.net/jq/colorize</p> <p>Coloriza 是一个Jquery 插件，可以为表格的行添加背景颜色，鼠标动作后为行、列增加高亮效果。你可以为很多行、列填色，只要你愿意。再从点击已经填色的行、列就可以还原表格本色。</p> <p><strong>怎么使用？</strong></p> <p>使用默认设置（colorizes a row）<br /> $('#yourTableId').colorize() ;</p> <p><strong>其他设置和参数:</strong></p> <p><strong>altColor </strong>: alternate row background color. The default is '#ECF6FC', 'none' can be used for no alternate background color.交替行的背景颜色。默认值为'＃ECF6FC'，'none' 可替代的背景颜色使用。 <br /> <strong>bgColor </strong>: background color (The default background color is white).背景颜色（默认背景颜色为白色）。 <br /> <strong>hoverColor </strong>: background color when you hover a mouse over a row. The default is '#BCD4EC'.背景颜色当鼠标经过行。默认值为'＃BCD4EC'。<br /> <strong>hoverClass</strong>: style class for mouseover; takes precedence over hoverColor property为鼠标经过样式类;hoverColor优先 <br /> <strong>hiliteColor </strong>: row highlight color. The default color is 'yellow'. 'none' can be used to disable highlighting.行高亮颜色。默认的颜色是'黄色'。 'none'可以用来取消高亮。<br /> <strong>hiliteClass </strong>: style class to be used to highlight a row or a column, takes precedence over the hiliteColor setting.样式类可用于强调一行或一列，hiliteColor设置优先。 <br /> <strong>columns </strong> : true/false/'hover'/'rowHover' - 默认 ‘false’. 如果 ‘true’,列高亮. 如果是 'hover', a column is highlighted on mouseover鼠标经过时列高亮, but does not respond to clicking但是点击没有效果. 相反, a row is highlighted when clicked一行被点击时候高亮. 如果是 'rowHover', a row is highlighted on mouseover鼠标经过时行高亮, and a column is highlighted on click点击后列高亮.<br /> <strong>oneClick </strong> : true/false - Allows only one row or column to be highlighted at a time. A click on a new row/column cancels the current highlight. The default is false.true/false-只允许一行或一列加以高亮每次。点击新行/列取消当前的高亮效果。默认值为false。<br /> <br /> <strong>banColumns </strong> :[]- Prevents certain columns from being highlighted when clicked, and also on mouseover. Supply an array of column indices as an argument. A value of 'last' can be used to ban the last column.可以实现被点击或鼠标经过时某些列不高亮 ，提供一个数组作为参数列指数。值为'last'可以用来禁止的最后一列。<br /> <br /> <strong>banDataClick </strong> :true/false - If true, you can only click on table header rows. The default is false.如果‘true’，你只能点击表格标题行。默认值为false。 <br /> <strong>ignoreHeaders </strong> :true/false - If true, header rows are not colorized. (no striping). The default is true.如果‘true’，头行不彩色。 （不分段）。默认值为true。<br /> <br /> <strong>nested </strong> :true/false . The default is false. Use it for more consistent striping if a table contains nested tables.默认值为false。使用更一致的条带，如果一个表包含嵌套表。</p> <p><strong>示例</strong>：</p> <p>The order of parameters is not important.<br /> $('#yourTableId').colorize({bgColor:'#EAF6CC', hoverColor:'green', hiliteColor:'red'});<br /> $('#yourTableId').colorize({ oneClick:true});<br /> $('#yourTableId').colorize({columns:true, banColumns :[0,1]});<br /> $('#yourTableId').colorize({ hiliteClass:'myStyle'});<br /> <br /> 没有高亮:<br /> $('#yourTableId').colorize( { hiliteColor:'none' } );</p> <p>默认设置: <code>$('#tbl1').colorize();</code><br /> 点击后行高亮。</p> <table id='tbl1'> <tr> <th nowrap>project_number</th> <th nowrap>cost_planned</th> <th nowrap>cost_actual</th> <th nowrap>computed</th> <th nowrap>sch_plan</th> <th nowrap>sch_actual</th> <th nowrap>effort_plan</th> <th nowrap>effort_actual</th> <th nowrap>scope_plan</th> <th nowrap>scope_act</th> </tr> <tr> <td> 0101</td> <td> 10</td> <td> 20</td> <td> </td> <td> 70</td> <td> 20</td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> </tr> <tr> <td> 0102</td> <td> 12</td> <td> 34</td> <td> 55</td> <td> 555</td> <td> 55</td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0104</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0149</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0150</td> <td> 310000</td> <td> 310000</td> <td> 0</td> <td> 3000</td> <td> 2923</td> <td> 400</td> <td> 391</td> <td> 219</td> <td> 219</td> </tr> <tr> <td> 0151</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0152</td> <td> 305250</td> <td> 0</td> <td> -1</td> <td> 2493</td> <td> 2056</td> <td> 121</td> <td> 121</td> <td> 14</td> <td> 14</td> </tr> <tr> <td> 0153</td> <td> 764800</td> <td> 719107</td> <td> 0</td> <td> 6078</td> <td> 5751</td> <td> 209</td> <td> 225</td> <td> 14</td> <td> 18</td> </tr> <tr> <td> 0155</td> <td> 0</td> <td> 0</td> <td> </td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> </tr> <tr> <td> 0167</td> <td> 236000</td> <td> 54360</td> <td> 0</td> <td> 8647</td> <td> 10105</td> <td> 258</td> <td> 320</td> <td> 78</td> <td> 92</td> </tr> </table> <h3>Jquery Colorize Plugin Demo - Colorizes Columns </h3> <p>Shows how to use the plugin to colorize columns: <code>$('#tbl1').colorize( {columns:true, oneClick:true} );</code>. <br />Every new click defaults the current highlighted column back to the orginal background color. <table id='tbl2' class='stripes'> <tr> <th nowrap>project_number</th> <th nowrap>cost_planned</th> <th nowrap>cost_actual</th> <th nowrap>computed</th> <th nowrap>sch_plan</th> <th nowrap>sch_actual</th> <th nowrap>effort_plan</th> <th nowrap>effort_actual</th> <th nowrap>scope_plan</th> <th nowrap>scope_act</th> </tr> <tr> <td> 0101</td> <td> 0</td> <td> 0</td> <td> </td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> <td> 0</td> </tr> <tr> <td> 0149</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0150</td> <td> 310000</td> <td> 310000</td> <td> 0</td> <td> 3000</td> <td> 2923</td> <td> 400</td> <td> 391</td> <td> 219</td> <td> 219</td> </tr> <tr> <td> 0151</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0152</td> <td> 305250</td> <td> 0</td> <td> -1</td> <td> 2493</td> <td> 2056</td> <td> 121</td> <td> 121</td> <td> 14</td> <td> 14</td> </tr> <tr> <td> 0153</td> <td> 764800</td> <td> 719107</td> <td> 0</td> <td> 6078</td> <td> 5751</td> <td> 209</td> <td> 225</td> <td> 14</td> <td> 18</td> </tr> <tr> <td> 0163</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> 0167</td> <td> 236000</td> <td> 54360</td> <td> 0</td> <td> 8647</td> <td> 10105</td> <td> 258</td> <td> 320</td> <td> 78</td> <td> 92</td> </tr> <tr> <td> 0167</td> <td> 236000</td> <td> 54360</td> <td> 0</td> <td> 8647</td> <td> 10105</td> <td> 258</td> <td> 320</td> <td> 78</td> <td> 92</td> </tr> <tr> <td> 0152</td> <td> 305250</td> <td> 0</td> <td> -1</td> <td> 2493</td> <td> 2056</td> <td> 121</td> <td> 121</td> <td> 14</td> <td> 14</td> </tr> <tr> <td> 0152</td> <td> 305250</td> <td> 0</td> <td> -1</td> <td> 2493</td> <td> 2056</td> <td> 121</td> <td> 121</td> <td> 14</td> <td> 14</td> </tr> <tr> <td> 0156</td> <td> 305250</td> <td> 0</td> <td> -1</td> <td> 2493</td> <td> 2056</td> <td> 121</td> <td> 121</td> <td> 14</td> <td> 14</td> </tr> </table> </body> </html>

提示：你可以先修改部分代码再运行。