js采用map取到id集合组并且实现点击一行选中一行


Posted in Javascript onDecember 16, 2013
<tbody > 
<tr > 
<td >1</td> 
<td>楼盘开业<br>折扣大大</td> 
<td>2011-11-11</td> 
<td>短信通知</td> 
</tr> 
<tr > 
<td>2</td> 
<td>楼盘开业<br>折扣大大</td> 
<td>2011-11-11</td> 
<td>短信通知</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> <div class="span7" id="right" > 
<table id="table1"> 
<caption>详细信息列表</caption> 
<thead> 
<tr> 
<td> <input type="checkbox" name="checkbox" id="btn"/>全选</td> 
<td>短信</td> 
<td>上传时间</td> 
<td>备注</td> 
</tr> 
</thead> 
<tbody id="selectable"> 
<tr class="dragableBox" id="box1" > 
<td id="45"> <input type="checkbox" name="box1" />1</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
<tr class="dragableBox" id="box2" ondragstart="test2()"> 
<td> <input type="checkbox" name="box2" /> 
2</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
<tr class="dragableBox" id="box3" ondragstart="test2()"> 
<td> <input type="checkbox" name="box3" /> 
3</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
<tr class="dragableBox" id="box4"> 
<td> <input type="checkbox" name="box4" /> 
4</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
<tr class="dragableBox" id="box5"> 
<td> <input type="checkbox" name="box5"/> 
5</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
<tr class="dragableBox" id="box6" onclick="clickDrop()" > 
<td> <input type="checkbox" name="box6" /> 
6</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
<tr class="dragableBox" id="box7"> 
<td> <input type="checkbox" name="box7" /> 
7</td> 
<td>开会发现<br>有错</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 
</tbody> 
</table> 
<input type="button" value="test" onclick="test2();"/> 
<script type="text/javascript"> 
var map = new HashMap(); 
$(function(){ 
$("#table1 tr ").click(function(e){ 
var trId=this.id; 
$("input[type='checkbox']").each(function(){//遍历ID 
if(this.name==trId){ 
if(this.checked==true){ 
$(this).attr("checked",false); 
map.remove(this.name); 
var dd=document.getElementById(trId); 
dd.style.backgroundColor= "white"; 
}else{ 
$(this).attr("checked",true); 
map.put(this.name,trId); 
var dd=document.getElementById(trId); 
dd.style.backgroundColor= " #FECA40"; 
} 
} 
}); 
}); 

}); 

</script>

function HashMap() 
{ 
/** Map 大小 **/ 
var size = 0; 
/** 对象 **/ 
var entry = new Object(); /** 存 **/ 
this.put = function (key , value) 
{ 
if(!this.containsKey(key)) 
{ 
size ++ ; 
} 
entry[key] = value; 
} 
/** 取 **/ 
this.get = function (key) 
{ 
if( this.containsKey(key) ) 
{ 
return entry[key]; 
} 
else 
{ 
return null; 
} 
} 
/** 删除 **/ 
this.remove = function ( key ) 
{ 
if( delete entry[key] ) 
{ 
size --; 
} 
} 
/** 是否包含 Key **/ 
this.containsKey = function ( key ) 
{ 
return (key in entry); 
} 
/** 是否包含 Value **/ 
this.containsValue = function ( value ) 
{ 
for(var prop in entry) 
{ 
if(entry[prop] == value) 
{ 
return true; 
} 
} 
return false; 
} 
/** 所有 Value **/ 
this.values = function () 
{ 
var values = new Array(size); 
for(var prop in entry) 
{ 
values.push(entry[prop]); 
} 
return values; 
} 
/** 所有 Key **/ 
this.keys = function () 
{ 
var keys = new Array(size); 
for(var prop in entry) 
{ 
keys.push(prop); 
} 
return keys; 
} 
/** Map Size **/ 
this.size = function () 
{ 
return size; 
} 
} 
// var map = new HashMap(); 
/* 
map.put("A","1"); 
map.put("B","2"); 
map.put("A","5"); 
map.put("C","3"); 
map.put("A","4"); 
*/ 
/* 
alert(map.containsKey("XX")); 
alert(map.size()); 
alert(map.get("A")); 
alert(map.get("XX")); 
map.remove("A"); 
alert(map.size()); 
alert(map.get("A")); 
*/ 
/** 同时也可以把对象作为 Key **/ 
/* 
var arrayKey = new Array("1","2","3","4"); 
var arrayValue = new Array("A","B","C","D"); 
map.put(arrayKey,arrayValue); 
var value = map.get(arrayKey); 
for(var i = 0 ; i < value.length ; i++) 
{ 
//alert(value[i]); 
} 
*/ 
/** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/ 
/** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/ 
// function MyObject(name) 
// { 
// this.name = name; 
// } 
/** 
function MyObject(name) 
{ 
this.name = name; 
this.toString = function () 
{ 
return this.name; 
} 
} 
**/ 
// var object1 = new MyObject("小张"); 
// var object2 = new MyObject("小名"); 
// 
// map.put(object1,"小张"); 
// map.put(object2,"小名"); 
// alert(map.get(object1)); 
// alert(map.get(object2)); 
// alert(map.size()); 
// 
/** 运行结果 小名 小名 size = 1 **/ 
/** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/
Javascript 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
js切换div css注意的细节
Dec 10 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
js捕获鼠标滚轮事件代码
Dec 16 #Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 #Javascript
使用firebug进行调试javascript的示例
Dec 16 #Javascript
javascript和jquery修改a标签的href属性
Dec 16 #Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 #Javascript
使用apply方法实现javascript中的对象继承
Dec 16 #Javascript
javaScript如何生成xmlhttp
Dec 16 #Javascript
You might like
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
github配置使用指南
2014/11/18 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python 求10个数的平均数实例
2019/12/16 Python
Python requests模块cookie实例解析
2020/04/14 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
工程师岗位职责规定
2014/02/26 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
体现团队精神的口号
2014/06/06 职场文书
物业管理专业自荐信
2014/07/01 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
不同意离婚上诉状
2015/05/23 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA