jQuery validate插件submitHandler提交導致死循環解決方法
656
2024-03-13
本文實例講述了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="http://www.gimoo.net/t/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/Scripts/jquery.similar.TabStyle.js" type="text/javascript"></script>
<script type="text/javascript">
$("table").TabStyle();
</script>
</body>
</html>
通過上文詳細的代碼，大家應該會利用jquery自定義表格樣式了，小編的表格樣式還不夠完美，還需要進行改進，希望大家在完成這個樣式的基礎上，繼續創新，做一個屬于自己的表格。
