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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
JavaScript类库D
Oct 24 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
JS实现页面打印功能
Mar 16 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
如何手写简易的 Vue Router
Oct 10 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获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
JS中如何设置readOnly的值
2013/12/25 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Python 导入文件过程图解
2019/10/15 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
怎么写好自荐信
2013/10/30 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
销售个人求职信范文
2014/04/28 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
个人求职信范文
2014/05/24 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
合作意向书范本
2019/04/17 职场文书
php引用传递
2021/04/01 PHP
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
PHP实现两种排课方式
2021/06/26 PHP
python三子棋游戏
2022/05/04 Python