首页
所有分类
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 相关文章推荐
网页自动刷新，不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
js实现继承的方法及优缺点总结
May 08 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
frg-100(1) AN-LP1(1) DE1107(3) 根德5570(1) YAESU(1) SONY600GR(1) DE1103(2) ICF-903L(1) DE1105(1) 239军机(1)
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python字典排序实例详解
2015/05/20 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python网络编程详解
2017/10/31 Python
基于wxPython的GUI实现输入对话框（2）
2019/02/27 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Moda Italia荷兰：意大利男士服装
2019/08/31 全球购物
阿玛尼美妆俄罗斯官网：Giorgio Armani Beauty RU
2020/07/19 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
将相和教学反思
2014/02/04 职场文书
教师自我反思材料
2014/02/14 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
保护环境倡议书500字
2014/05/19 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
爱心捐款感谢信
2015/01/20 职场文书
董事长新年致辞
2015/07/29 职场文书
读《皮囊》有感：理解是对他人的最大的善举
2019/11/14 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android