如何用鼠标选择多个td 要求可以进行多选,选中后在<TABLE>元素中的<TD>将会改变颜色,点击其它地方取消选中。//这个地方的要求没看明白,解释解释 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 下面是一个示例:<style>body{b:expression(document.onclick=function(){check()})}body{d:expression(document.onkeydown=function(){setKey()})}body{r:expression(document.onkeyup=function(){resetKey()})}tr{t:expression(this.onclick=function(){setSelect(this)})}</style><script>var ctrlKey=false; //判断是否按住Ctrl键var options=''; //选中的项var selectColor='red'; //定义选中的颜色var unselectColor='white'; //定义未选中颜色function setSelect(obj){ if(ctrlKey==false) { for(var i=0;i<obj.parentNode.parentNode.rows.length;i++) { obj.parentNode.parentNode.rows[i].style.backgroundColor=unselectColor; } obj.style.backgroundColor=selectColor; } else { obj.style.backgroundColor=selectColor; } if(ctrlKey==false) show(); }function check(){ if(event.srcElement.tagName!='BODY') { return; } else { var obj=document.getElementsByTagName('table')[0]; for(var i=0;i<obj.rows.length;i++) { obj.rows[i].style.backgroundColor=unselectColor; } }}function setKey(){ if(event.ctrlKey) { ctrlKey=true; }}function resetKey(){ if(ctrlKey==true) { ctrlKey=false; show(); } }function show(){ var obj=document.getElementsByTagName('table')[0]; for(var i=0;i<obj.rows.length;i++) { if(obj.rows[i].style.backgroundColor==selectColor) options=options+obj.rows[i].childNodes[1].innerText+'\n' } alert('您选择了:\n'+options); options=''; }</script><body><table><tr><td>1</td><td>AAAAAAA</td></tr><tr><td>2</td><td>BBBBBBB</td></tr><tr><td>3</td><td>CCCCCCC</td></tr></table></body> <STYLE type="text/css"><!--.Checked_Color { background-color: #31CFCE;}--></STYLE>document.getElementById(id).className = "Checked_Color";我只看明白这些,其他地方没看懂楼主说的 简单的写了一些如果要实现资源管理器的功能,代码将相当多按CTRL多选<table id=t1><tr><td id=td11 onclick="selTD(this);">aaaaaaaaaa</td><td id=td12 onclick="selTD(this);">bbbbbbbbb</td><td id=td13 onclick="selTD(this);">ccccccccc</td></tr><tr><td id=td21 onclick="selTD(this);">dddddddddd</td><td id=td22 onclick="selTD(this);">eeeeeeeee</td><td id=td23 onclick="selTD(this);">fffffffff</td></tr><tr><td id=td31 onclick="selTD(this);">gggggggggg</td><td id=td32 onclick="selTD(this);">hhhhhhhhh</td><td id=td33 onclick="selTD(this);">iiiiiiiii</td></tr></table><input type=button value="我选中了什么?" onclick="getSelectTD();" name="getSTD"><script>var selTDID =new Array();var selTDText=new Array();//选择TDfunction selTD(obj){ if(!event.ctrlKey) { clearTD(); obj.style.background="blue"; } else obj.style.background=(obj.style.background=="blue"?"":"blue"); clearSelection();}//清除表格所有TD背景function clearTD(){var table1=document.all.t1;for(var i=0;i<table1.cells.length;i++) table1.cells[i].style.background="";}//清除选择区function clearSelection(){ var os=document.selection.createRange(); os.move("character",0); os.select();}//取得选中表格function getSelectTD(){ var table1=document.all.t1; var j=-1; for(var i=0;i<table1.cells.length;i++) if(table1.cells[i].style.background=="blue") { j++; selTDID[j]=table1.cells[i].id; selTDText[j]=table1.cells[i].innerText; alert(selTDID[j]+":"+selTDText[j]); } if(j==-1)alert("什么也没选中"); }document.onclick=function(){var o=event.srcElement;if(o.tagName=="INPUT"&&o.name=="getSTD")return;for(var i=1;i<=3;i++) {o=o.parentElement; if(!o){ clearTD(); return;} }if(o.id!="t1")clearTD();}</script> 谢谢vivianfdlpw,梅川库子两位帮助,功能已经基本实现,明天结贴 window.onkeypress jquery 不执行单击事件 具体代码如下 应该如何解决? 谁有做过电子地图 怎样让这个兼容IE6/7和FF 怎么样让动态生成的select中的某个option设置为selected 使用insertRow 动态的增加了表格以后,怎么赋予ID值? 不重新 发送信息,则无法刷新网页??? 怎样在搜狗地图上同时显示多个infowindow 100分 求解! JS或Jquery文件夹按“访问时间排序” 怎么样才能用response.write来传递一个带有参数的的URL。 想在dropdownlist中实现如下功能[求助]
body{b:expression(document.onclick=function(){check()})}
body{d:expression(document.onkeydown=function(){setKey()})}
body{r:expression(document.onkeyup=function(){resetKey()})}
tr{t:expression(this.onclick=function(){setSelect(this)})}
</style>
<script>
var ctrlKey=false; //判断是否按住Ctrl键
var options=''; //选中的项
var selectColor='red'; //定义选中的颜色
var unselectColor='white'; //定义未选中颜色
function setSelect(obj)
{
if(ctrlKey==false)
{
for(var i=0;i<obj.parentNode.parentNode.rows.length;i++)
{
obj.parentNode.parentNode.rows[i].style.backgroundColor=unselectColor;
} obj.style.backgroundColor=selectColor;
}
else
{
obj.style.backgroundColor=selectColor;
}
if(ctrlKey==false)
show(); }
function check()
{ if(event.srcElement.tagName!='BODY')
{
return;
}
else
{
var obj=document.getElementsByTagName('table')[0];
for(var i=0;i<obj.rows.length;i++)
{
obj.rows[i].style.backgroundColor=unselectColor;
}
}
}
function setKey()
{
if(event.ctrlKey)
{
ctrlKey=true;
}
}
function resetKey()
{ if(ctrlKey==true)
{
ctrlKey=false;
show();
}
}function show()
{
var obj=document.getElementsByTagName('table')[0];
for(var i=0;i<obj.rows.length;i++)
{
if(obj.rows[i].style.backgroundColor==selectColor)
options=options+obj.rows[i].childNodes[1].innerText+'\n'
}
alert('您选择了:\n'+options);
options='';
}</script>
<body>
<table>
<tr>
<td>1</td><td>AAAAAAA</td>
</tr>
<tr>
<td>2</td><td>BBBBBBB</td>
</tr>
<tr>
<td>3</td><td>CCCCCCC</td>
</tr>
</table>
</body>
<!--
.Checked_Color {
background-color: #31CFCE;
}
-->
</STYLE>
document.getElementById(id).className = "Checked_Color";我只看明白这些,其他地方没看懂楼主说的
如果要实现资源管理器的功能,代码将相当多按CTRL多选
<table id=t1>
<tr><td id=td11 onclick="selTD(this);">aaaaaaaaaa</td><td id=td12 onclick="selTD(this);">bbbbbbbbb</td><td id=td13 onclick="selTD(this);">ccccccccc</td></tr>
<tr><td id=td21 onclick="selTD(this);">dddddddddd</td><td id=td22 onclick="selTD(this);">eeeeeeeee</td><td id=td23 onclick="selTD(this);">fffffffff</td></tr>
<tr><td id=td31 onclick="selTD(this);">gggggggggg</td><td id=td32 onclick="selTD(this);">hhhhhhhhh</td><td id=td33 onclick="selTD(this);">iiiiiiiii</td></tr>
</table>
<input type=button value="我选中了什么?" onclick="getSelectTD();" name="getSTD">
<script>
var selTDID =new Array();
var selTDText=new Array();
//选择TD
function selTD(obj){
if(!event.ctrlKey)
{ clearTD();
obj.style.background="blue";
}
else
obj.style.background=(obj.style.background=="blue"?"":"blue");
clearSelection();
}
//清除表格所有TD背景
function clearTD(){
var table1=document.all.t1;
for(var i=0;i<table1.cells.length;i++)
table1.cells[i].style.background="";
}
//清除选择区
function clearSelection(){
var os=document.selection.createRange();
os.move("character",0);
os.select();
}
//取得选中表格
function getSelectTD(){
var table1=document.all.t1;
var j=-1;
for(var i=0;i<table1.cells.length;i++)
if(table1.cells[i].style.background=="blue")
{
j++;
selTDID[j]=table1.cells[i].id;
selTDText[j]=table1.cells[i].innerText;
alert(selTDID[j]+":"+selTDText[j]);
}
if(j==-1)alert("什么也没选中");
}
document.onclick=function(){
var o=event.srcElement;
if(o.tagName=="INPUT"&&o.name=="getSTD")return;
for(var i=1;i<=3;i++)
{o=o.parentElement;
if(!o){
clearTD();
return;}
}
if(o.id!="t1")clearTD();
}
</script>