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动态添加、删除元素的方法
Jan 09 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
jQuery插件开发汇总
May 15 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php实现头像上传预览功能
2017/04/27 PHP
jQuery性能优化的38个建议
2014/03/04 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
微信小程序登录换取token的教程
2018/05/31 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python函数参数操作详解
2018/08/03 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
实习鉴定评语
2014/01/19 职场文书
初中生自我评价
2014/02/01 职场文书
幼儿园招生广告
2014/03/19 职场文书
志愿者宣传口号
2014/06/17 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
python字符串常规操作大全
2021/05/02 Python