js采用map取到id集合組并且實(shí)現(xiàn)點(diǎn)擊一行選中一行
更新時(shí)間:2013年12月16日 17:44:27 作者:
本文為大家介紹下如何使用js采用map取到id集合組,并且點(diǎn)擊一行選中一行
復(fù)制代碼 代碼如下:
<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()方法的對象 , 效果就完全不一樣了 **/
您可能感興趣的文章:
- js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
- js實(shí)現(xiàn)選中復(fù)選框文字變色的方法
- js實(shí)現(xiàn)將選中值累加到文本框的方法
- JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法
- js實(shí)現(xiàn)文本框選中的方法
- js單獨(dú)獲取一個(gè)checkbox看其是否被選中
- js獲取checkbox復(fù)選框選中的選項(xiàng)實(shí)例
- js獲取select默認(rèn)選中的Option并不是當(dāng)前選中值
- js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動(dòng)選中內(nèi)容的方法
相關(guān)文章
Javascript實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
網(wǎng)上關(guān)于JS實(shí)現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多,但是比較雜亂,有的不支持多音字、不支持聲調(diào)或者字典文件太大,無法根據(jù)實(shí)際需要滿足需求。這篇文章給大家修正整理網(wǎng)上的幾種常見方法,文章結(jié)尾還附簡單的JS拼音輸入法,本文對大家具有一定的參考借鑒價(jià)值,下面一起看看吧。2016-10-10js實(shí)現(xiàn)簡單的星級(jí)選擇器提交效果適用于評(píng)論等
星級(jí)選擇器在網(wǎng)上會(huì)搜到很多類似的代碼,不過實(shí)現(xiàn)起來相對比較復(fù)雜,在本文將為大家介紹的是使用js簡單的實(shí)現(xiàn)下,感興趣的朋友不要錯(cuò)過2013-10-10詳解webpack import()動(dòng)態(tài)加載模塊踩坑
這篇文章主要介紹了詳解webpack import()動(dòng)態(tài)加載模塊踩坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07JavaScript onclick與addEventListener使用的區(qū)別介紹
addEventListener()方法用于向指定元素添加事件句柄,使用 removeEventListener()方法來移除,onclick和addEventListener事件區(qū)別是:onclick事件會(huì)被覆蓋,而addEventListener可以先后運(yùn)行不會(huì)被覆蓋,addEventListener可以監(jiān)聽多個(gè)事件2022-09-09scrapyd schedule.json setting 傳入多個(gè)值問題
這篇文章主要介紹了scrapyd schedule.json setting 傳入多個(gè)值,本文給出了問題分析及思路解決方案,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-08-08ECMAScript6輪播圖實(shí)踐知識(shí)總結(jié)
最近萌生了用ECMAScript6寫一個(gè)輪播圖的想法,以前就知道ECMAScript6,但是一直沒有學(xué),現(xiàn)在終于下決心學(xué)了,本篇文章會(huì)總結(jié)在實(shí)踐中用到的ES6的知識(shí)。2016-08-08javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法
這篇文章主要介紹了javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法,涉及javascript實(shí)現(xiàn)頁面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07