首页
所有分类
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 相关文章推荐
json数据的列循环示例
Sep 06 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
JavaScript多线程详解
Aug 12 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
anime.js 实现带有描边动画效果的复选框（推荐）
Dec 24 Javascript
js数据类型检测总结
Aug 05 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
夯基础之手撕javascript继承详解
Nov 09 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
Pickle(1) hashlib(1) requests(1) 面向对象(3) hmac(1) logging(1) 解密(1) openpyxl(1) 加密(1) 相对路径(1)
You might like
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php变量范围介绍
2012/10/15 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php限制ip地址范围的方法
2015/03/31 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
基于jquery的返回顶部效果（兼容IE6）
2011/01/17 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JS实现多选框的操作
2020/06/24 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python浪漫表白源码
2019/04/05 Python
Python中请不要再用re.compile了
2019/06/30 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
意大利买卖二手奢侈品网站：LAMPOO
2020/06/03 全球购物
万代美国官网：PREMIUM BANDAI USA
2020/09/11 全球购物
安全标兵事迹材料
2014/08/17 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
导游词创作书写原则以及开场白技巧怎么学？
2019/09/25 职场文书
php远程请求CURL案例（爬虫、保存登录状态）
2021/04/01 PHP