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


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 类型转换常见方法小结
May 31 Javascript
js模拟类继承小例子
Jul 17 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 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
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
实例讲解PHP表单处理
2019/02/15 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
keras K.function获取某层的输出操作
2020/06/29 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
应届毕业生自我鉴定范文
2013/12/27 职场文书
校三好学生主要事迹
2014/01/11 职场文书
运动会开幕式主持词
2014/03/28 职场文书
借款担保书范文
2014/05/13 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015年数学教师工作总结
2015/05/20 职场文书