快捷導(dǎo)航

js采用map取到id集合組并且實(shí)現(xiàn)點(diǎn)擊一行選中一行

更新時(shí)間：2013年12月16日 17:44:27 作者：

本文為大家介紹下如何使用js采用map取到id集合組,并且點(diǎn)擊一行選中一行

 
<tbody > 
<tr > 
<td >1</td> 
<td>樓盤開業(yè)<br>折扣大大</td> 
<td>2011-11-11</td> 
<td>短信通知</td> 
</tr> 
<tr > 
<td>2</td> 
<td>樓盤開業(yè)<br>折扣大大</td> 
<td>2011-11-11</td> 
<td>短信通知</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 

<div class="span7" id="right" > 
<table id="table1"> 
<caption>詳細(xì)信息列表</caption> 
<thead> 
<tr> 
<td> <input type="checkbox" name="checkbox" id="btn"/>全選</td> 
<td>短信</td> 
<td>上傳時(shí)間</td> 
<td>備注</td> 
</tr> 
</thead> 
<tbody id="selectable"> 
<tr class="dragableBox" id="box1" > 
<td id="45"> <input type="checkbox" name="box1" />1</td> 
<td>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</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>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</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>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 

<tr class="dragableBox" id="box4"> 
<td> <input type="checkbox" name="box4" /> 
4</td> 
<td>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 

<tr class="dragableBox" id="box5"> 
<td> <input type="checkbox" name="box5"/> 
5</td> 
<td>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</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>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</td> 
<td>2011-01-30</td> 
<td>五</td> 
</tr> 

<tr class="dragableBox" id="box7"> 
<td> <input type="checkbox" name="box7" /> 
7</td> 
<td>開會(huì)發(fā)現(xiàn)<br>有錯(cuò)</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> 

復(fù)制代碼代碼如下:

 
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")); 
*/ 

/** 同時(shí)也可以把對象作為 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時(shí) ，自動(dòng)調(diào)用了該對象的 toString() 方法 其實(shí)最終還是以String對象為Key**/ 

/** 如果是自定義對象 那自己得重寫 toString() 方法 否則 . 就是下面的結(jié)果 **/ 

// 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()); 
// 
/** 運(yùn)行結(jié)果 小名 小名 size = 1 **/ 

/** 如果改成復(fù)寫toString()方法的對象 , 效果就完全不一樣了 **/ 