jquery table
因而今天看了下jquery文檔也本身來兩個，獻醜啦！
需求:
一：操做table
一、無侵入式可編輯
二、隔行換色
三、拉動表頭，自定義寬度
四、可編輯
五、編輯後的數據顏色區分
五、css文件本身定義，無需和插件綁定，這樣更加靈活
六、一切可配置
1：名字就叫bestTable
二:拖動div
萬惡的IE6，在自定義的js文件中有時候加備註會讓IE6報錯，我很是蛋疼，多是中文註釋的緣由因此鍵盤事件的代碼取消了註釋，一切正常，只要在一寫備註ie6就運行不了，
jquery.bestTable.js
(function($){ javascript
$.fn.bestTable = function(options) css
{ html
/** java
* isDrog 是否能夠拖動表頭寬度 jquery
* oddtrBackgroundColor odd背景顏色 瀏覽器
* isEffect 是否開啓鼠標特效 ide
* effectBackgroundColor 鼠標移動後的背景色 ui
* isEditor 是否開啓可編輯狀態 this
* isEditorNewColor 編輯狀態背景色 spa
* isEditorNewColor 是否開啓編輯後狀態
* editorNewColorBackgroundColor 編輯後背景色
*/
var defaults = {
isDrog : true,
oddtrBackgroundColor:"#EEE",
isEffect:true,
effectBackgroundColor:"#CCCCCC",
isEditor:true,
editorBackgroundColor:"#FFFFCC",
isEditorNewColor:true,
editorNewColorBackgroundColor : "0099FF"
};
var opts = $.extend(defaults, options);
var backgroundColor='background-color';
$(this).each(function()
{
//獲取當前table
var newTable= $(this);
//是否容許拖動表頭
if(opts.isDrog)drog(newTable); //鼠標拖動th
$(newTable).find("tbody tr:odd").css(backgroundColor,opts.oddtrBackgroundColor);
//獲取當前table中tbody中的td
var newtd = $(newTable).find('tbody td');
//編輯狀態(鼠標變手形)和鼠標特效狀態(改變背景色)都須要給當前td設置mouseover
newtd.mouseover(function(){
//保存當前td的背景色
var oldbackgroundColor=$(this).css(backgroundColor);
if(opts.isEffect)//啓動特效狀態
{
$(this).css({'cursor':'pointer',backgroundColor:opts.effectBackgroundColor});//修改鼠標爲手狀、修改背景色
$(this).mouseout(function(){
$(this).css({backgroundColor:oldbackgroundColor}); //光標移開後恢復到最初背景色
});
}
});
//不容許編輯
if(!opts.isEditor)returnfalse;
//單擊td
newtd.click(function(){
var td = $(this);
//判斷當前td中是否已經包含了inpu文本框
if(td.children("input").length>0){returnfalse};
//爲當前td添加一個編輯框臨時input
var inputObject = $("<input type='text'/>").height("100%").width("100%").css({
"font-size":td.css("font-size"),
backgroundColor:opts.editorBackgroundColor,
"border-width":0
});
//取消當前input文本框單擊事件
inputObject.click(function(){returnfalse});
//獲取td文本框放入一個變量
var tdText = td.html();
//將td中的文本框賦值給input中
inputObject.val(tdText);
//將input放入td文本框當中
td.html(inputObject);
//選中編輯區域 兼容全部瀏覽器
inputObject.trigger("focus").trigger("select");
inputObject.blur(function(){
//恢復td的文本
td.html(tdText);
//刪除input
$(this).remove();
});
//鍵盤
inputObject.keydown(function(event){
var keyCode = event.which;
switch(keyCode){
case 13:
var inputText = $(this).val();
td.html(inputText);
$(this).remove();
if(!opts.isEditorNewColor)returnfalse;
td.css(backgroundColor,opts.editorNewColorBackgroundColor);
break;
case 27:
td.html(tdText);
$(this).remove();
break;
}
});
});
});
//不多的代碼實現拖動表頭
function drog(table){
var tr = $(table).find("thead tr");
var th = $(table).find('thead tr th');
$(tr).mousemove(function(event){
$(this).css("cursor","e-resize");
});
$(th).mousedown(function(event){
$(this).mousemove(function(e){
var width = $(this).width();
var px = e.clientX-event.clientX;
$(this).width(width+px);
});
});
$(th).mouseup(function(){
$(th).unbind('mousemove');
});
}
};
})(jQuery);
(function($){
$.fn.bestTable = function(options)
{
/**
* isDrog 是否能夠拖動表頭寬度
* oddtrBackgroundColor odd背景顏色
* isEffect 是否開啓鼠標特效
* effectBackgroundColor 鼠標移動後的背景色
* isEditor 是否開啓可編輯狀態
* isEditorNewColor 編輯狀態背景色
* isEditorNewColor 是否開啓編輯後狀態
* editorNewColorBackgroundColor 編輯後背景色
*/
var defaults = {
isDrog : true,
oddtrBackgroundColor:"#EEE",
isEffect:true,
effectBackgroundColor:"#CCCCCC",
isEditor:true,
editorBackgroundColor:"#FFFFCC",
isEditorNewColor:true,
editorNewColorBackgroundColor : "0099FF"
};
var opts = $.extend(defaults, options);
var backgroundColor='background-color';
$(this).each(function()
{
//獲取當前table
var newTable= $(this);
//是否容許拖動表頭
if(opts.isDrog)drog(newTable); //鼠標拖動th
$(newTable).find("tbody tr:odd").css(backgroundColor,opts.oddtrBackgroundColor);
//獲取當前table中tbody中的td
var newtd = $(newTable).find('tbody td');
//編輯狀態(鼠標變手形)和鼠標特效狀態(改變背景色)都須要給當前td設置mouseover
newtd.mouseover(function(){
//保存當前td的背景色
var oldbackgroundColor=$(this).css(backgroundColor);
if(opts.isEffect)//啓動特效狀態
{
$(this).css({'cursor':'pointer',backgroundColor:opts.effectBackgroundColor});//修改鼠標爲手狀、修改背景色
$(this).mouseout(function(){
$(this).css({backgroundColor:oldbackgroundColor}); //光標移開後恢復到最初背景色
});
}
});
//不容許編輯
if(!opts.isEditor)return false;
//單擊td
newtd.click(function(){
var td = $(this);
//判斷當前td中是否已經包含了inpu文本框
if(td.children("input").length>0){return false};
//爲當前td添加一個編輯框臨時input
var inputObject = $("<input type='text'/>").height("100%").width("100%").css({
"font-size":td.css("font-size"),
backgroundColor:opts.editorBackgroundColor,
"border-width":0
});
//取消當前input文本框單擊事件
inputObject.click(function(){return false});
//獲取td文本框放入一個變量
var tdText = td.html();
//將td中的文本框賦值給input中
inputObject.val(tdText);
//將input放入td文本框當中
td.html(inputObject);
//選中編輯區域 兼容全部瀏覽器
inputObject.trigger("focus").trigger("select");
inputObject.blur(function(){
//恢復td的文本
td.html(tdText);
//刪除input
$(this).remove();
});
//鍵盤
inputObject.keydown(function(event){
var keyCode = event.which;
switch(keyCode){
case 13:
var inputText = $(this).val();
td.html(inputText);
$(this).remove();
if(!opts.isEditorNewColor)return false;
td.css(backgroundColor,opts.editorNewColorBackgroundColor);
break;
case 27:
td.html(tdText);
$(this).remove();
break;
}
});
});
});
//不多的代碼實現拖動表頭
function drog(table){
var tr = $(table).find("thead tr");
var th = $(table).find('thead tr th');
$(tr).mousemove(function(event){
$(this).css("cursor","e-resize");
});
$(th).mousedown(function(event){
$(this).mousemove(function(e){
var width = $(this).width();
var px = e.clientX-event.clientX;
$(this).width(width+px);
});
});
$(th).mouseup(function(){
$(th).unbind('mousemove');
});
}
};
})(jQuery);
頁面 引入 jquery.js 和 自定義的 jquery.bestTable.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.html</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="this is my page">
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.bestTable.js"></script>
<scripttype="text/javascript">
$(document).ready(function()
{
//最簡單配置 默認配置
$('table#demo').bestTable();
//按需求配置
$('table#demo2').bestTable({
isDrog:false, //不容許拖動表頭寬度
oddtrBackgroundColor:'red', //改變odd背景色
isEffect:false, //關閉鼠標滑動特效
isEditorNewColor:false //編輯完成後不改變背景色
});
});
</script>
<style>
table {
border: solid 1px #D5D5D5;
border-collapse: collapse;
height:auto;
}
tbody td {
border:1px solid #D5D5D5;
font-size:12px;
}
thead th {
border:1px solid #D5D5D5;
background-color:#EEE;
font-size:12px;
}
</style>
</head>
<body>
<!-- demo -->
<tableid="demo">
<thead>
<tr>
<th>userName</th>
<th>email</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
</tbody>
</table>
<br/>
<!-- demo2 -->
<tableid="demo2">
<thead>
<tr>
<th>userName</th>
<th>email</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>xiaomaha</td>
<td>xiaomaha@163.com</td>
<td>男</td>
</tr>
<tr>
<td>xiaomaha2</td>
<td>xiaomaha2@163.com</td>
<td>男</td>
</tr>
<tr>
<td>xiaomaha3</td>
<td>xiaomaha3@163.com</td>
<td>男</td>
</tr>
<tr>
<td>xiaomaha4</td>
<td>xiaomaha4@163.com</td>
<td>男</td>
</tr>
</tbody>
</table>
<spanid="a"></span><br/><spanid="b"></span><br/><spanid="c"></span><br/><spanid="d"></span><br/>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bestTable.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//最簡單配置 默認配置
$('table#demo').bestTable();
//按需求配置
$('table#demo2').bestTable({
isDrog:false, //不容許拖動表頭寬度
oddtrBackgroundColor:'red', //改變odd背景色
isEffect:false, //關閉鼠標滑動特效
isEditorNewColor:false //編輯完成後不改變背景色
});
});
</script>
<style>
table {
border: solid 1px #D5D5D5;
border-collapse: collapse;
height:auto;
}
tbody td {
border:1px solid #D5D5D5;
font-size:12px;
}
thead th {
border:1px solid #D5D5D5;
background-color:#EEE;
font-size:12px;
}
</style>
</head>
<body>
<!-- demo -->
<table id="demo">
<thead>
<tr>
<th>userName</th>
<th>email</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
<tr>
<td>胡**</td>
<td>1016181216@163.com</td>
<td>男</td>
</tr>
</tbody>
</table>
<br/>
<!-- demo2 -->
<table id="demo2">
<thead>
<tr>
<th>userName</th>
<th>email</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>xiaomaha</td>
<td>xiaomaha@163.com</td>
<td>男</td>
</tr>
<tr>
<td>xiaomaha2</td>
<td>xiaomaha2@163.com</td>
<td>男</td>
</tr>
<tr>
<td>xiaomaha3</td>
<td>xiaomaha3@163.com</td>
<td>男</td>
</tr>
<tr>
<td>xiaomaha4</td>
<td>xiaomaha4@163.com</td>
<td>男</td>
</tr>
</tbody>
</table>
<span id="a"></span><br/><span id="b"></span><br/><span id="c"></span><br/><span id="d"></span><br/>
</body>
</html>
顯示結果
拖動表頭寬度
編輯狀態改變背景色
編輯後回車 被編輯過的td會改變顏色
---------------------bestTableOver------------------
可拖動的div
(function($){
$.fn.bestDrag = function(options)
{
var defaults = {
}
var opts = $.extend(defaults, options);
this.each(function()
{
var tag = $(this);
drog(tag);
});
//處處亂拖
function drog(tag){
$(tag).mousedown(function(e){
$(this).css("cursor","move");
var offset = $(this).offset();
var x = e.clientX-offset.left;
var y = e.clientY-offset.top;
$(document).bind("mousemove",function(event){
var _x = event.clientX-x;
var _y = event.clientY-y;
$(tag).animate({left:_x,top:_y},0);
});
});
$(document).mouseup(function()
{
$(tag).css("cursor","default");
$(this).unbind("mousemove");
});
}
};
})(jQuery);
(function($){
$.fn.bestDrag = function(options)
{
var defaults = {
}
var opts = $.extend(defaults, options);
this.each(function()
{
var tag = $(this);
drog(tag);
});
//處處亂拖
function drog(tag){
$(tag).mousedown(function(e){
$(this).css("cursor","move");
var offset = $(this).offset();
var x = e.clientX-offset.left;
var y = e.clientY-offset.top;
$(document).bind("mousemove",function(event){
var _x = event.clientX-x;
var _y = event.clientY-y;
$(tag).animate({left:_x,top:_y},0);
});
});
$(document).mouseup(function()
{
$(tag).css("cursor","default");
$(this).unbind("mousemove");
});
}
};
})(jQuery);
頁面引入jquery和自定義的jquery.bestDrag.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="this is my page">
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.bestDrag.js"></script>
<styletype="text/css">
div{
background:#660099;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<scripttype="text/javascript">
$(document).ready(function(){
$('div').bestDrag();
</script>
</head>
<body>
<div>可拖動的div</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bestDrag.js"></script>
<style type="text/css">
div{
background:#660099;
width:100px;
height:100px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
$(document).ready(function(){
$('div').bestDrag();
</script>
</head>
<body>
<div>可拖動的div</div>
</body>
</html>
顯示結果：很平滑、無延遲
點擊下載
大小: 6.1 KB
大小: 10.8 KB
大小: 11.1 KB
大小: 11.2 KB
大小: 2.3 KB
大小: 2.5 KB
- 1. jquery遍歷table
- 2. Jquery Data Table插件
- 3. jquery給table添加行
- 4. Jquery Table 的基本操做
- 5. jQuery動態添加Table行
- 6. jquery操做table表格
- 7. jQuery寫table佈局樣式
- 8. bootstrap + bootstrap-table + jquery + bootstrap-paginator
- 9. JQuery實現table分頁
- 10. jquery ui sortable 實現table，row的拖動。（Make Table Rows Sortable Using jQuery UI Sortable）
- 更多相關文章...
- • SQLite Truncate Table - SQLite教程
- • ASP.NET Table 控件 - ASP.NET 教程
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
- • 漫談MySQL的鎖機制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jquery遍歷table
- 2. Jquery Data Table插件
- 3. jquery給table添加行
- 4. Jquery Table 的基本操做
- 5. jQuery動態添加Table行
- 6. jquery操做table表格
- 7. jQuery寫table佈局樣式
- 8. bootstrap + bootstrap-table + jquery + bootstrap-paginator
- 9. JQuery實現table分頁
- 10. jquery ui sortable 實現table，row的拖動。（Make Table Rows Sortable Using jQuery UI Sortable）