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 1.0.2
Oct 11 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
jquery实现submit提交表单
Feb 03 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
小程序实现搜索框功能
Mar 26 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
原生js实现日历效果
Mar 02 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/12/18 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
各种快递查询--Api接口
2016/04/26 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python表示矩阵的方法分析
2017/05/26 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python中字符串与编码示例代码
2019/05/20 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Java程序员综合测试题
2014/04/25 面试题
英语国培研修感言
2014/02/13 职场文书
企业法人代表任命书
2014/06/06 职场文书
在职证明书模板
2015/06/15 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
高三化学教学反思
2016/02/22 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android