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


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 相关文章推荐
js验证是否为数字的总结
Apr 14 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
Mac下安装vue
Apr 11 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python实现简易淘宝购物
2019/11/22 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
大学校庆策划书
2014/01/31 职场文书
校本教研活动总结
2014/07/01 职场文书
ktv好的活动方案
2014/08/15 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android