首页
所有分类
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 相关文章推荐
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
js中call与apply的用法小结
Dec 28 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
详解.vue文件中监听input输入事件（oninput）
Sep 19 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
JS继承实现方法及优缺点详解
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
复合索引(1) Carbon(1) 数据合并(1) 连接查询(1) pongo2(1) element-ui(1) 缓存机制(1) 模板引擎(1) BufferPool(1) 逻辑函数(1)
You might like
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
es6函数之尾调用优化实例分析
2020/04/25 Javascript
Python subprocess模块学习总结
2014/03/13 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python线性方程组求解运算示例
2018/01/17 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
大学生创业计划书的用途
2014/01/08 职场文书
大学校运会广播稿
2014/02/03 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
培养联系人考察意见
2015/06/01 职场文书
小人国观后感
2015/06/11 职场文书
趣味运动会简讯
2015/07/20 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android