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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
Admin generator, filters and I18n
2011/10/06 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
探究python中open函数的使用
2016/03/01 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python中import reload __import__的区别详解
2017/10/16 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
numpy.random模块用法总结
2019/05/27 Python
python实现简单遗传算法
2020/09/18 Python
python元组拆包实现方法
2021/02/28 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
思想专业自荐信范文
2013/12/25 职场文书
电视节目策划方案
2014/05/16 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
珍爱生命主题班会
2015/08/13 职场文书
python基础之函数的定义和调用
2021/10/24 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Android studio 简单计算器的编写
2022/05/20 Java/Android