網頁代碼
. 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="ManualTable2.js"></script>
<title>無標題文檔</title>
<script>
$(document).ready(function(e) {
$("#GridTable").ManualTable({
//ChangeAction:function(){
// var inputs=$(this).parent().parent().find("input");
//alert(inputs.length);
}
});
});
</script>
</head>
<body >
<table id="GridTable">
<thead>
<th>員工編號</th>
<th >姓名</th>
<th >工作部門</th>
<th>職務</th>
<th>家庭住址</th>
<th >聯系電話</th>
<th >手機</th>
<th>備注</th>
</thead>
<tr>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
</tr>
<tr>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
</tr>
<tr>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
</tr>
<tr>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
<td>456456</td>
</tr>
</table>
</body>
</html>
<pre code_snippet_id="251084" snippet_file_name="blog_20140322_1_1781185" name="code" class="javascript">// 根據網上前輩的腳本改了一下，添加了一些功能，也許對初學者有些幫助
//這個腳本就是個裝飾作用,對原生的table支持，不過不支持table有其它元素
(function ($) {
$.fn.ManualTable = function (options) {
var tabid = $(this).attr("id");
var lineMove = false;
var currTh = null;
var opts = $.extend({}, $.fn.ManualTable.defaults, options);
$(this).css({
"*border-collapse": "collapse",
"border-spacing": 0,
"width": "100%",
"border": "solid " + opts.BorderColor + " 1px",
"font-size": opts.TableFontSize
});
$("#" + tabid + " th").css({
"background": opts.ThBackColor,
"border-left": "solid " + opts.BorderColor + " 1px",
"height": opts.ThHeight,
"color": opts.ThColor
});
$("#" + tabid + " td").css({
"border-left": "solid " + opts.BorderColor + " 1px",
"height": opts.TdHeight,
"border-top": "solid " + opts.BorderColor + " 1px",
"padding": "0",
"color": opts.TdColor,
"background": opts.TdBackColor
});
$("#" + tabid + " th:first-child,#" + tabid + " td:first-child").css({
"border-left": "none"
});
/*
*/
var str = $("#" + tabid + " td").html();
$("#" + tabid + " td").html("<input style='width:100%; border:none; height:100%;vertical-align:middle' value='" + str + "' readonly/>");
$("#" + tabid + " input").css({
"background-color": opts.TdBackColor,
"color": opts.TdColor
});
if (opts.IsODDChange) {
$("#" + tabid + " tr:even").find("input").css({
"background-color": opts.ChangeColor1
});
}
if (opts.IsMoveChange == true) {
$("#" + tabid + " tr").hover(function () {
$(this).find("input").css("background", opts.ChangeColor2);
}, function () {
$(this).find("input").css("background", opts.TdBackColor);
});
}
$.each($("#" + tabid + " tr"), function () {
for (var i = 0; i < opts.CenterIndex.length; i++) {
$(this).find("input").eq(opts.CenterIndex[i]).css({
"text-align": "center"
});
}
for (var i = 0; i < opts.EditIndex.length; i++) {
$(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly");
}
});
$("body").append("<div id=\"markline\" style=\"width:1px;height:200px;border-left:1px solid #999; position:absolute;display:none\" ></div> ");
$("body").bind("mousemove", function (event) {
if (lineMove == true) {
$("#markline").css({
"left": event.clientX
}).show();
}
});
$("#" + tabid + " th").bind("mousemove", function (event) {
$("body").attr({
onselectstart: "event.returnValue=false"
});
var th = $(this);
var left = th.offset().left;
if (th.prevAll().length < 1) {
if ((th.width() - (event.clientX - left)) < 4) {
th.css({
'cursor': 'col-resize'
});
}
else {
th.css({
'cursor': 'default'
});
}
} else if (th.nextAll().length < 1) {
if (event.clientX - left < 4) {
th.css({
'cursor': 'col-resize'
});
}
else {
th.css({
'cursor': 'default'
});
}
} else {
if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {
th.css({
'cursor': 'col-resize'
});
}
else {
th.css({
'cursor': 'default'
});
}
}
});
$("#" + tabid + " th").bind("mousedown", function (event) {
var th = $(this);
var pos = th.offset();
if (th.prevAll().length < 1) {
if ((th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().parent().height();
var top = pos.top;
$("#markline").css({
"height": height,
"top": top,
"left": event.clientX,
"display": ""
});
lineMove = true;
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
} else if (th.nextAll().length < 1) {
if (event.clientX - pos.left < 4) {
var height = th.parent().parent().parent().height();
var top = pos.top;
$("#markline").css({
"height": height,
"top": top,
"left": event.clientX,
"display": ""
});
lineMove = true;
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
} else {
if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {
var height = th.parent().parent().parent().height();
var top = pos.top;
$("#markline").css({
"height": height,
"top": top,
"left": event.clientX,
"display": ""
});
lineMove = true;
if (event.clientX - pos.left < th.width() / 2) {
currTh = th.prev();
}
else {
currTh = th;
}
}
}
});
$("body").bind("mouseup", function (event) {
$("body").removeAttr("onselectstart");
if (lineMove == true) {
$("#markline").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
$(this).find("tr").each(function () {
$(this).children().eq(index).width(event.clientX - pos.left);
}); //.children().eq(index).width(event.clientX - pos.left);
}
});
$("#" + tabid + " tr").bind(opts.RowsType, opts.RowsClick);
$("#" + tabid + " input").bind("change", opts.ChangeAction);
$("#" + tabid + " input").focus(function (e) {
$(this).css({
"border": "none"
})
});
$("#" + tabid + " th").bind("mouseup", function (event) {
$("body").removeAttr("onselectstart");
if (lineMove == true) {
$("#markline").hide();
lineMove = false;
var pos = currTh.offset();
var index = currTh.prevAll().length;
currTh.width(event.clientX - pos.left);
currTh.parent().parent().find("tr").each(function () {
$(this).children().eq(index).width(event.clientX - pos.left);
});
}
});
};
$.fn.ManualTable.defaults = {
UpDataUrl: "Updata.do",
//定義編輯更新數據遠程請求地址（可以不要）
TableFontSize: "12px",
//定義表格字體大小
ThBackColor: "#005AD2",
//定義TH表頭背景顏色
ThColor: "#fff",
//定義表頭文字顏色
ThHeight: "30px",
//定義表頭高度
TdBackColor: "#FFF",
//定義TD背景顏色
TdColor: "red",
//定義TD文字顏色
TdHeight: "20px",
//定義TD高度
BorderColor: "#555",
//定義表格邊框線條顏色
IsODDChange: false,
//是否隔行變色 這個與鼠標滑動變色不能同時使用
ChangeColor1: "#ff0",
//隔行變色顏色
IsMoveChange: true,
//是否鼠標滑動變色
ChangeColor2: "#00f",
//鼠標滑動變色顏色
CenterIndex: [3, 4, 5, 6],
//定義居中列index 0開始
EditIndex: [2, 3, 5],
//定義可編輯列index 0開始
//定義編輯觸發函數，自動更新保存數據
ChangeAction: function () {
var basepath = $.fn.ManualTable.defaults.UpDataUrl;
var tds = $(this).parent().parent().find("input");
var str = "";
$.each(tds, function (i) {
str += str == "" ? "arg" + i + "=" + $(this).val() : "&arg" + i + "=" + $(this).val();
});
alert(basepath + "?" + str);
//$.get($.fn.ManualTable.defaults.UpDataUrl+"?"+str,function(data){
// alert(data);
//});
},
//定義行輯觸發函數
IsRowsClick: true,
//是否觸發
RowsType: "dblclick",
//觸發方式
//觸發函數
RowsClick: function () {
alert($.fn.ManualTable.defaults.UpDataUrl);
}
};
})(jQuery);</pre><br>
<pre></pre>
<br>