js采用map取到id集合组并且实现点击一行选中一行

Javascript教程 2025-08-12

复制代码代码如下:

< 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 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 id="box1"  >

< td id="45" > < input type="checkbox" name="box1" / >1< /td >

< td >开会发现< br >有错< /td >

< td >2011-01-30< /td >

< td >五< /td >

< /tr >

< tr id="box2" ondragstart="test2()" >

< td > < input type="checkbox" name="box2" / >

2< /td >

< td >开会发现< br >有错< /td >

< td >2011-01-30< /td >

< td >五< /td >

< /tr >

< tr id="box3" ondragstart="test2()" >

< td > < input type="checkbox" name="box3" / >

3< /td >

< td >开会发现< br >有错< /td >

< td >2011-01-30< /td >

< td >五< /td >

< /tr >

< tr id="box4" >

< td > < input type="checkbox" name="box4" / >

4< /td >

< td >开会发现< br >有错< /td >

< td >2011-01-30< /td >

< td >五< /td >

< /tr >

< tr id="box5" >

< td > < input type="checkbox" name="box5"/ >

5< /td >

< td >开会发现< br >有错< /td >

< td >2011-01-30< /td >

< td >五< /td >

< /tr >

< tr id="box6" onclick="clickDrop()"  >

< td > < input type="checkbox" name="box6" / >

6< /td >

< td >开会发现< br >有错< /td >

< td >2011-01-30< /td >

< td >五< /td >

< /tr >

< tr 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()方法的对象 , 效果就完全不一样了 **/