Make the table the sample code for exls
- 2020-03-30 02:27:50
- OfStack
Web page code
<!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> Headless document </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> Employee number </th>
<th > The name </th>
<th > department </th>
<th> position </th>
<th> Home address </th>
<th > Contact phone number </th>
<th > Mobile phone </th>
<th> note </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">//According to the script of the online predecessors changed, added some features, maybe some help for beginners
//This script is just a decoration, it supports the native table, but it does not support other elements of the 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",
//Define edit update data remote request address (optional)
TableFontSize: "12px",
//Define the table font size
ThBackColor: "#005AD2",
//Defines the TH header background color
ThColor: "#fff",
//Defines the header text color
ThHeight: "30px",
//Defines the header height
TdBackColor: "#FFF",
//Define the TD background color
TdColor: "red",
//Define the TD text color
TdHeight: "20px",
//Define TD height
BorderColor: "#555",
//Defines the line color of the table border
IsODDChange: false,
//Interlaced discoloration this cannot be used at the same time as a mouse slide discoloration
ChangeColor1: "#ff0",
//Alternate colors
IsMoveChange: true,
//Whether the mouse slides color
ChangeColor2: "#00f",
//Slide the mouse over the color
CenterIndex: [3, 4, 5, 6],
//Define the center column to start at index 0
EditIndex: [2, 3, 5],
//Define the editable column index 0 to begin with
//Define the edit trigger function to automatically update and save data
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);
//});
},
//Defines the line logic trigger function
IsRowsClick: true,
//Whether the trigger
RowsType: "dblclick",
//triggered
//Trigger function
RowsClick: function () {
alert($.fn.ManualTable.defaults.UpDataUrl);
}
};
})(jQuery);</pre><br>
<pre></pre>
<br>