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实例收集(20个)
Apr 21 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
vue.js表格分页示例
Oct 18 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
javascript中layim之查找好友查找群组
Feb 06 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将向Java靠拢
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
pygame实现雷电游戏雏形开发
2018/11/20 Python
python线程的几种创建方式详解
2019/08/29 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
华为c/c++笔试题
2016/01/25 面试题
社区食品安全实施方案
2014/03/28 职场文书
青年标兵事迹材料
2014/08/16 职场文书
单位活动策划方案
2014/08/17 职场文书
文明家庭事迹材料
2014/12/20 职场文书
营运督导岗位职责
2015/04/10 职场文书
护士医德医风心得体会
2016/01/25 职场文书