首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

怎么通过javascript来实现这个难题

2012-02-26 
如何通过javascript来实现这个难题?需求:1.按住ctrl,然后依次单击table中的不同的td,从而使多个td被选中并

如何通过javascript来实现这个难题?
需求:
        1.按住   ctrl   ,然后依次单击   table   中的   不同的td   ,从而使多个td被选中并高亮显示;
        2.然后这些选中的td能接受一次onclick   事件,输出所有选中td的内容;

<table>  
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
    </tr>      
    <tr>
        <td> 8 </td>
        <td> 9 </td>
        <td> 10 </td>
        <td> 11 </td>
        <td> 12 </td>
        <td> 13 </td>
        <td> 14 </td>
    </tr>      
</table>

[解决办法]
试一下用event.keyCode写呢
[解决办法]
给每个td加onclick,被次click将此ID保存到某个地方..

然后..
[解决办法]
function keyShow(e){
if (window.event){
alert(window.event.ctrlKey);
}else{
alert(e.ctrlKey);
}
}
document.onclick = keyShow;
基本思路就这样了,if else里省略n行
[解决办法]
你的td加多3个属性,一个是ID,一个是bgColor,然后一个是primaryColor这样,
事件就用:
document.keydown = f_keydown;

function f_keydown(){
if(event.keyCode == 17){
//点击时候将对应ID的BGCOLOR切换,再点就可以读会primaryColor设回原来的颜色
//记录你点过的内容就行了
}
}
[解决办法]
<style>
.tdChange{
cursor:hand;
background-color:red;
}
.tdDefault{
cursor:hand;
background-color:white;
}
</style>
<script>
document.onkeydown=function(){
if (event.ctrlKey){
document.onclick = function(){
if (event.srcElement.tagName== "TD "){
event.srcElement.className == "tdDefault "?event.srcElement.className = "tdChange ":event.srcElement.className = "tdDefault "
}
}
}
}
function fnc(){
var objTd=document.getElementById( "tabA ").getElementsByTagName( "TD ");
for (var i=0;i <objTd.length;i++){
if (objTd[i].className == "tdChange "){
alert (objTd[i].innerText)
}
}
}
</script>
<table id= "tabA ">
<tr>
<td class= "tdDefault "> 1 </td>
<td class= "tdDefault "> 2 </td>
<td class= "tdDefault "> 3 </td>
<td class= "tdDefault "> 4 </td>
<td class= "tdDefault "> 5 </td>
<td class= "tdDefault "> 6 </td>
<td class= "tdDefault "> 7 </td>
</tr>
<tr>
<td class= "tdDefault "> 8 </td>


<td class= "tdDefault "> 9 </td>
<td class= "tdDefault "> 10 </td>
<td class= "tdDefault "> 11 </td>
<td class= "tdDefault "> 12 </td>
<td class= "tdDefault "> 13 </td>
<td class= "tdDefault "> 14 </td>
</tr>
</table>
<button onclick= "fnc(); "> show me the value </button>

热点排行