单元选择合并变色示例代码


Posted in Javascript onMay 26, 2014

周末为了解答一个问题,写了一堆代码,功能基本实现,但感觉结构太差了,没太多考虑。一点都不漂亮

<!DOCTYPE HTML> 
<HTML> 
<head> 
<TITLE>The document title</TITLE> 
<meta charset=utf-8> 
<script src="lib/jquery-1.8.1.min.js" type="text/javascript"></script> 
<style type="text/css"> 
table{ 
border-spacing: 0; 
} 
td{ 
height: 50px; 
width: 50px; 
border-spacing: 0; 
} 
.hidden{ 
display: none; 
} 
</style> 
</head> <body> 
<table border="1"> 
<tr id ="r1"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr id ="r2"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
<p id ='log'></p> 
<button type="button" onclick="combine()">hebing</button> 
<script type="text/javascript"> 
var selectecdlog = []; 
var resultLen = 0; 
var resultBegin = 0; 
var backColor = ['red','green','blue']; // assume 3 rows 1 -red 2 - green 3 - blue 
var resultColor =0; 
$("td").mousedown(function() { 
selectecdlog = []; 
resultColor = backColor[$(this).parent().attr('id').substr(1)-1]; 
$('td').css('background-color', 'white'); 
// ID for tr tag 
//alert($(this).parent().attr('id')); 
//get the column No. 
//alert($(this).index()+1); 
$(this).css('background-color', resultColor); 
selectecdlog.push($(this).attr('id')); 
//alert($(this).attr('id')); 
$("td").mouseup(onMouseUp); 
$("td").mouseover(onMouseOver); 
}) 
function onMouseUp(){ 
/* Act on the event */ 
var len =resultLen= Math.abs(parseInt(selectecdlog[0].substr(selectecdlog[0].indexOf('c')+1)) - parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)))+1; 
var begin =resultBegin= parseInt(selectecdlog[0].substr(selectecdlog[0].indexOf('c')+1)) >parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)) ? parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)):parseInt(selectecdlog[0].substr(selectecdlog[0].indexOf('c')+1)); 
for(var i =0; i<resultLen;i++) 
{ 
selectecdlog.push(selectecdlog[0].substr(0,2)+"c"+(resultBegin+i)); 
} 
selectecdlog.shift(); 
$('#log').text(selectecdlog.toString()); 
$("td").unbind('mouseover',onMouseOver); 
$("td").unbind('mouseup',onMouseUp); 
} 
function onMouseOver (argument) { 
var len =resultLen= Math.abs(parseInt(selectecdlog[0].substr(selectecdlog[0].indexOf('c')+1)) - parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)))+1; 
var begin =resultBegin= parseInt(selectecdlog[0].substr(selectecdlog[0].indexOf('c')+1)) >parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)) ? parseInt($(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)):parseInt(selectecdlog[0].substr(selectecdlog[0].indexOf('c')+1)); 
$('td').css('background-color', 'white'); 
for(var i =0; i<len;i++) 
{ 
$('#'+selectecdlog[0].substr(0,2)+"c"+(begin+i)).css('background-color', resultColor); 
} 
//alert( $(this).attr('id').substr(($(this).attr('id').indexOf('c'))+1)); 
//$('#'+tdId).css('background-color', 'red'); 
} 
// set id attr for each td 
$("td").each(function(index, val){ 
/* iterate through array or object */ 
$(this).attr('id', $(this).parent().attr('id')+"c"+($(this).index()+1))}); 
//combine cells 
function combine (argument) { 
// body... 
for (var m in selectecdlog) 
{ 
if(m==0) 
{ 
$('#'+selectecdlog[m]).attr('colspan', resultLen); 
$('#'+selectecdlog[m]).css('width',resultLen*50+"px"); 
//$('#'+selectecdlog[m]).css('background-color', 'bule'); 
} 
else{ 
$('#'+selectecdlog[m]).addClass('hidden'); 
} 
} 
} 
</script> 
</body> 
</HTML>
Javascript 相关文章推荐
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
JavaScript实现Tab选项卡切换
Feb 13 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
ie 7/8不支持trim的属性的解决方案
May 23 #Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 #Javascript
jquery重复提交请求的原因浅析
May 23 #Javascript
jquery仿搜索自动联想功能代码
May 23 #Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 #Javascript
You might like
PHP出错界面
2006/10/09 PHP
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
python模拟事件触发机制详解
2018/01/19 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python绘制组合图的示例
2020/09/18 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
英语专业推荐信
2013/11/16 职场文书
小摄影师教学反思
2014/04/27 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
九华山导游词
2015/02/03 职场文书
工作会议通知
2015/04/15 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python