Jquery表格样式插件：隔行换色，移动换色，点击换色实现

"这篇内容主要介绍了一个基于Jquery的表格样式增强插件，该插件实现了表格隔行换色、鼠标移动换色以及点击选中换色的功能。通过编写JQUERY插件并应用到表格元素上，可以为表格提供更丰富的视觉效果。" 在网页设计中，表格是一个常见的数据展示工具，为了提升用户体验，经常会使用一些技巧来美化表格，比如隔行换色可以提高可读性，鼠标移动和点击选中换色则能提供更好的交互反馈。本篇文章分享了一个使用Jquery实现的插件，它能够轻松地为表格添加这些功能。 首先，我们来看这个Jquery插件的实现。插件的核心代码如下： ```javascript ;(function($){ $.fn.extend({ "alterBgColor":function(options){ // 设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); // 隔行变色 $("tbody>tr:even",this).addClass(option.even); $("tbody>tr:odd",this).addClass(option.odd); // 单击行变色 $('tbody>tr',this).click(function(){ var hasSelected=$(this).hasClass(option.selected); $(this)[hasSelected?"removeClass":"addClass"](option.selected) .find(":checkbox").attr('checked',!hasSelected); }); // 已选中行高亮 $("tbody>tr:has(:checked)",this).addClass(option.selected); return this; } }); })(jQuery); ``` 这段代码定义了一个名为`alterBgColor`的Jquery扩展方法。该方法接受一个选项对象`options`，其中包含`odd`、`even`和`selected`三个属性，分别表示奇数行、偶数行和选中行的CSS类名。通过`$.extend`函数，插件将默认值与传入的选项合并。然后，插件遍历表格的行，根据行的索引（奇偶性）添加相应的CSS类，实现隔行换色。点击行时，插件会根据当前行是否已选中切换CSS类，同时更新行内的复选框状态。最后，插件返回`this`，使得可以链式调用其他Jquery方法。 接下来，我们看如何应用这个插件： ```javascript $(function(){ // 按默认类 $("#table2").alterBgColor() .find("th").css("font-size","18"); // 自定义类，给定值； $("#table1").alterBgColor({ odd:"odd1", even:"even1", selected:"mselected" }).find("th").css("font-size","18"); }) ``` 这段代码展示了如何在页面加载完成后（`$(function(){...})`是Jquery的文档就绪事件）调用`alterBgColor`插件。对`#table2`，我们使用默认的CSS类名；而对`#table1`，我们传入自定义的类名。此外，还统一设置了表头`th`的字体大小。 最后，文章给出了两个不同结构的表格示例，以便展示插件的灵活性和适应性。在实际使用中，可以根据自己的需求调整表格结构，并结合插件提供的功能，定制出满足各种视觉效果的表格。 总结来说，这个基于Jquery的表格样式插件通过简单易用的方法，极大地丰富了表格的视觉表现，提高了用户的浏览体验。无论是隔行换色、鼠标移过变色还是点击选中变色，都使得表格的数据更容易被用户理解和操作。在网页开发中，这样的插件可以大大提高开发效率，同时也提升了产品的专业感和用户体验。