首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

让table变成exls的示例代码

Posted in Javascript onMarch 24, 2014

网页代码 

<!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>

让table变成exls的示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
JS实现音量控制拖动
Jan 15 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 #Javascript
JS中判断null、undefined与NaN的方法
Mar 24 #Javascript
jquery高级编程的最佳实践详解
Mar 23 #Javascript
js 判断浏览器使用的语言示例代码
Mar 22 #Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 #Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 #Javascript
jquery获取复选框被选中的值
Mar 22 #Javascript
find(1) zip(1) enumerate(1) gevent(1) pytest(3) 自动化(1) list(1) greenlet(1) 进销存(1) csv(4)
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
深入理解Promise.all
2018/08/08 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Django框架模板用法入门教程
2019/11/04 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
迪斯尼商品官方网站：ShopDisney
2016/08/01 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
副董事长岗位职责
2014/04/02 职场文书
药剂专业自荐书
2014/06/20 职场文书
反腐倡廉标语
2014/06/24 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
新闻学专业职业生涯规划范文：我的人生我做主
2014/09/12 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
休学证明范本
2015/06/19 职场文书
旷工检讨书大全
2015/08/15 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python