jquery自定义表格样式
本文实例讲述了jquery自定义表格样式实现代码。分享给大家供大家参考。具体如下：
运行效果截图如下：
上面这张图有3种状态，默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），是如何实现的呐？
Html代码如下：
<table>
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>2222</td>
<td>2222</td>
<td>2222</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>3333</td>
<td>3333</td>
<td>3333</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>4444</td>
<td>4444</td>
<td>4444</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>5555</td>
<td>5555</td>
<td>5555</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
</tbody>
</table>
插件实现代码如下：
(function () {
$.fn.TabStyle = function (options) {
//默认参数设置
var settings = {
evenClass: "tab_even", //偶数行样式
oddClass: "tab_odd", //奇数行样式
hoverClass: "tab_hover", //鼠标悬浮样式
clickClass: "tab_click", //鼠标点击样式
isClick: true //是否开启鼠标点击样式
};
//合并参数
$.extend(settings, options);
return this.each(function () {
//为奇偶行分别添加样式
$(" > tbody > tr:even", this).addClass(settings.evenClass);
$(" > tbody > tr:odd", this).addClass(settings.oddClass);
$(" > tbody > tr", this).each(function (i) {
//鼠标悬浮样式
$(this).hover(function () {
$(this).addClass(settings.hoverClass);
}, function () {
$(this).removeClass(settings.hoverClass);
});
//鼠标点击样式
if (settings.isClick) {
$(this).bind("click", function () {
$(this).addClass(settings.clickClass).siblings("tr").removeClass(settings.clickClass);
});
}
});
});
}
})();
有些时候我们可能并不需要鼠标点击后的样式，因此设置了isClick这个作为控制开关。如果不想要点击样式，将其设置为false即可。
DEMO如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格样式（银光棒）</title>
<style type="text/css">
table{ width:700px; border:1px solid green;border-collapse:collapse;}
table td{height:40px; text-align:center; width:25%;}
.tab_even{ background-color: #DDD;}
.tab_odd{ background-color: White;}
.tab_hover{ background-color: Green;color:White;}
.tab_click{ background-color: Orange;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>2222</td>
<td>2222</td>
<td>2222</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>3333</td>
<td>3333</td>
<td>3333</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>4444</td>
<td>4444</td>
<td>4444</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
<tr>
<td>5555</td>
<td>5555</td>
<td>5555</td>
<td><input type="button" value="查看" /><input type="button" value="删除" /></td>
</tr>
</tbody>
</table>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.similar.TabStyle.js" type="text/javascript"></script>
<script type="text/javascript">
$("table").TabStyle();
</script>
</body>
</html>
通过上文详细的代码，大家应该会利用jquery自定义表格样式了，小编的表格样式还不够完美，还需要进行改进，希望大家在完成这个样式的基础上，继续创新，做一个属于自己的表格。
-
问题内容： 我有一个非常简单的表格： 这是自定义表单验证的完成方式吗？我需要评估该电子邮件地址当前没有用户存在。我还需要评估并匹配。我该怎么做呢？ 问题答案： 要单独验证单个字段，可以在表单中使用clean_FIELDNAME（）方法，因此对于电子邮件： 然后对于相互依赖的共同依赖字段，你可以覆盖在单独验证所有字段（email如上）之后运行的 方法： 我不确定你从哪里来，但是看起来这是为m你的表单
-
pre { white-space: pre-wrap; } 数据网格（datagrid）内置一个很好特性的分页功能，自定义也相当简单。在本教程中，我们将创建一个数据网格（datagrid），并在分页工具栏上添加一些自定义按钮。 创建数据网格（DataGrid） <table id="tt" title="Load Data" url="data/datagrid
-
pre { white-space: pre-wrap; } 如果默认的排序行为不满足您的需求，您可以自定义数据网格（datagrid）的排序行为。 最基础的，用户可以在列上定义一个排序函数，函数名是 sorter。这个函数将接受两个值，返回值将如下： valueA > valueB => 返回 1 valueA 返回 -1 自定义排序代码 <table id="tt"></table>
-
本文向大家介绍jQuery实现自定义下拉列表，包括了jQuery实现自定义下拉列表的使用技巧和注意事项，需要的朋友参考一下 html代码： css代码： js(jquery)代码： 虽然代码很简单，但是效果是不是非常酷呢
-
是否可以使用用户扩展在Selenium IDE中创建自定义命令.js并使其能够将自身更改为自定义导出格式，如果是这样，如何？ 我将使用SeleniumIDE记录测试，这些测试将以完全自定义的Java格式导出，作为全自动测试系统的一部分运行。格式不是JUnit，而是每个测试都是它自己的类，并根据整个系统的输入动态加载。 我想要做的是在Selenium IDE中创建一个名为“take snapshot
-
nginx自带了两个日期时间变量： $time_local $time_iso8601 如果不希望修改操作系统的时区设置，而想改变nginx日志中的日期时间格式，怎么做呢？ 比如，日志输出时间格式： 希望的输出格式：(注意，除了日期格式不同，时间数值也变化了) 另外，nginx日志用于tcp转发，即nginx配置的下面位置：