让table变成exls的示例代码
代码 代码 示例 Table 变成
2023-06-13 09:15:24 时间
网页代码
复制代码代码如下:
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<scripttype="text/javascript"src="jquery-2.0.3.min.js"></script>
<scripttype="text/javascript"src="ManualTable2.js"></script>
<title>无标题文档</title>
<script>
$(document).ready(function(e){
$("#GridTable").ManualTable({
//ChangeAction:function(){
//varinputs=$(this).parent().parent().find("input");
//alert(inputs.length);
}
});
});
</script>
</head>
<body>
<tableid="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>
<precode_snippet_id="251084"snippet_file_name="blog_20140322_1_1781185"name="code"class="javascript">//根据网上前辈的脚本改了一下，添加了一些功能，也许对初学者有些帮助
//这个脚本就是个装饰作用,对原生的table支持，不过不支持table有其它元素
(function($){
$.fn.ManualTable=function(options){
vartabid=$(this).attr("id");
varlineMove=false;
varcurrTh=null;
varopts=$.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"
});
/*
*/
varstr=$("#"+tabid+"td").html();
$("#"+tabid+"td").html("<inputstyle="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(vari=0;i<opts.CenterIndex.length;i++){
$(this).find("input").eq(opts.CenterIndex[i]).css({
"text-align":"center"
});
}
for(vari=0;i<opts.EditIndex.length;i++){
$(this).find("input").eq(opts.EditIndex[i]).removeAttr("readonly");
}
});
$("body").append("<divid=\"markline\"style=\"width:1px;height:200px;border-left:1pxsolid#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"
});
varth=$(this);
varleft=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"
});
}
}elseif(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){
varth=$(this);
varpos=th.offset();
if(th.prevAll().length<1){
if((th.width()-(event.clientX-pos.left))<4){
varheight=th.parent().parent().parent().height();
vartop=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;
}
}
}elseif(th.nextAll().length<1){
if(event.clientX-pos.left<4){
varheight=th.parent().parent().parent().height();
vartop=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){
varheight=th.parent().parent().parent().height();
vartop=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;
varpos=currTh.offset();
varindex=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;
varpos=currTh.offset();
varindex=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],
//定义居中列index0开始
EditIndex:[2,3,5],
//定义可编辑列index0开始
//定义编辑触发函数，自动更新保存数据
ChangeAction:function(){
varbasepath=$.fn.ManualTable.defaults.UpDataUrl;
vartds=$(this).parent().parent().find("input");
varstr="";
$.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>
相关文章
- 用好JAVA中的函数式接口，轻松从通用代码框架中剥离掉业务定制逻辑
- 【开源分享】教你如何在HTML中执行Python脚本代码！超级简单赶紧收藏。
- 使用 ABAP 代码给 PDF 文件分配 usage right(未经笔者验证)
- r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现|附代码数据
- R语言使用虚拟变量(Dummy Variables) 回归分析工资影响因素|附代码数据
- Asp.net下载功能的解决方案代码
- jQuery与javascript对照学习获取父子前后元素实现代码
- JSP获取真实IP地址的代码
- PHPMemCached高级缓存应用代码
- SQLSERVER加密解密函数(非对称密钥证书加密对称密钥)使用方法代码
- js动画效果制件让图片组成动画代码分享