让table变成exls的示例代码

2014-10-09  来源:本站原创  分类:jquery  人气:2 

这篇文章主要介绍了让table变成exls的方法,需要的朋友可以参考下

网页代码

<!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的示例代码 2014-10-09

    这篇文章主要介绍了让table变成exls的方法,需要的朋友可以参考下 网页代码 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-2.0.3.min.js"></script> <script type="text/j

  • Javascript遍历table中的元素示例代码 2015-01-10

    这篇文章主要介绍了Javascript如何遍历table中的元素,需要的朋友可以参考下 例如: <table id=tb> <tr><th> </th><th> </th><th> </th><th> </th></tr> <tr><td> </td><td> </td><td> </td>&

  • 利用js动态添加删除table行的示例代码 2014-04-03

    本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: //动态添加行 function addRow(){ var table = document.getElementById("tableID"); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格 newCell.innerHTML = &q

  • 利用JS来控制键盘的上下左右键(示例代码) 2014-01-23

    这篇文章主要介绍了利用JS来控制键盘的上下左右键示例代码.需要的朋友可以过来参考下,希望对大家有所帮助 这是一个JS初级代码,想学JS的朋友,可以研究下或者扩展下,最好能用JS实现整个键盘的控制,那感觉就很有意思了. 具体代码如下: <style> tr.highlight{background:#08246B;color:white;} </style> <table border="1" width="70%" id="i

  • 两个select多选模式的选项相互移动(示例代码) 2014-02-28

    本篇文章主要是对两个select多选模式的选项相互移动示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • javascript弹出层输入框(示例代码) 2014-03-05

    这篇文章主要介绍了javascript弹出层输入框(示例代码).需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: <script language="javascript" type="text/javascript"> function alertWin(title, msg, w, h) { var titleheight = "22px"; // 窗口标题高度 var bordercolor = "#66669

  • Jquery插件easyUi表单验证提交(示例代码) 2014-03-18

    本篇文章主要是对Jquery插件easyUi表单验证提交的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <form id="myForm" method="post"> <table align="center" style="width:400px;height:auto;margin-top: 20px"> <tr> <td align="right&

  • PHP网站安装程序制作的原理.步骤.注意事项和示例代码 2014-03-27

    其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中,从这个过程中重新配置连接数据库的参数和文件,为了保证不被别人恶意使用安装文件,当安装完成后需要修改安装文件. 1.制作PHP安装程序的原理 其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中,从这个过程中重新配置连接数据库的参数和文件,为了保证不被别人恶意使用安装文件,当安装完成后需要修改安装文件. 2. 制作PHP安装程序的步骤 step1 检查目录或文件的权限 step2 修改或填加配置文件 step

  • 利用js实现前台动态添加文本框,后台获取文本框内容(示例代码) 2014-04-17

    这篇文章主要是对利用js实现前台动态添加文本框,后台获取文本框内容的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一共两个页面,分别如下: 一.创建页面create.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • js获取当前地址 JS获取当前URL的示例代码 2014-05-19

    本篇文章主要是对js获取当前地址 JS获取当前URL的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <table width=100% cellpadding=0 cellspacing=0 border=0 > <script language="javascript"> thisURL = document.URL; thisHREF = document.location.href; thisSLoc = self.location.h

  • 用javascript删除当前行,添加行(示例代码) 2015-01-02

    这篇文章主要介绍了用javascript删除当前行,添加行的示例代码.需要的朋友可以过来参考下,希望对大家有所帮助 删除行 <script> function del(obj) { obj.parentNode.parentNode.removeNode(true); } </script> <body> <table> <tr> <td>单元格1</td> <td><input type=button

  • php操作mysqli(示例代码) 2015-01-03

    php操作mysqli的示例代码.需要的朋友可以过来参考下,希望对大家有所帮助 <?php define("MYSQL_OPEN_LOGS",true); class mysqliHelp { private $db; public function __construct() { //如果要查询日志log的话,怎么办 } public function __get($name ) { //echo "__GET:",$name; if(in_array($n

  • Jquery实现搜索框提示功能示例代码 2015-01-24

    数据量很大的情况下使用Ajax去实现真的不合适,于是想采用Jquery来实现方法,具体的示例代码如下,有需求的朋友可以参考下希望对大家有所帮助 博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数据量很大的情况下使用Ajax去实现真的不合适,于是,我又写了一个使用Jquery来实现方法. 废话不多说,上图上代码: 引用方式: <body style=

  • javascript客户端遍历控件与获取父容器对象示例代码 2015-02-28

    本篇文章主要是对javascript客户端遍历控件与获取父容器对象示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1,遍历也面中所有的控件function findControlAll() { var inputs=document.getElementsByTagName("input"); for(j=0;j<inputs.length;j++) if(inputs[j].type=="text") //这儿将页面所有类型为text的控件

  • js输出阴历.阳历.年份.月份.周示例代码 2015-03-12

    本篇文章主要是对js输出阴历.阳历.年份.月份.周示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta content="Microsoft FrontPage 4.0"> <meta content=&q

  • 在Iframe中获取父窗口中表单的值(示例代码) 2015-04-05

    这篇文章主要介绍了在Iframe中获取父窗口中表单的值(示例代码).需要的朋友可以过来参考下,希望对大家有所帮助 部分代码如下: <from name="frm" action="bb.asp"> <table> <tr> <td><input type="text" name="BH"></td> </tr> <tr> <t

  • Asp.net mvc 数据调用示例代码 2015-04-25

    Asp.net mvc 数据调用示例代码,学习asp.net mvc框架的朋友可以参考下. (1)首先我们创建一个mvc项目,当然最好是mvc1.0版本以上. (2)我这个小Demo,没有重新配置路由解析,使用的是mvc项目默认的路由解析地址.当然如果谁感兴趣也可以自己添加一个默认路由! (3)我这里有一个名字叫Database1.mdf的数据库,里面包含一个News表. (4)然后我们右击Models文件夹,Models>添加新项,选择: 名字可以自己随便起.我这里叫做Test.edmx,然后

  • 微软一站式示例代码库 2010-05-31 新增代码示例简介 2010-06-01

    阅读: 912 评论: 2 作者: Jialiang 发表于 2010-06-01 09:12 原文链接 微软一站式开发技术框架2010年5月31日更新. 下载地址: http://1code.codeplex.com/releases/view/46212#DownloadId=124539 如果您是第一次听说All-In-One Code Framework这个项目,请参阅主页上的相关介绍http://1code.codeplex.com/, 以及这两篇blog All-In-One Cod

  • nodejs 连接Mysql相关操作的示例代码(orm) 2013-09-28

    上一篇博文写了nodejs 连接Mysql相关操作的示例代码,主要用到的是sql语句,都是比较基础的.这篇打算介绍一下nodejs的ORM操作,毕竟大型系统的开发还是需要用到ORM. nodejs里有不少的ORM框架,找了一个比较流行且容易上手的,框架名就是ORM2. ORM2目前支持MySQL.PostgreSQL.Amazon Redshift.SQLite四种数据库 安装如下: npm install orm CRUD代码如下: var orm = require("orm");

  • js二维数组排序的简单示例代码 2013-10-05

    本篇主要是对js二维数组排序的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> &l