masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > javascript键盘上下键的操作(选择)_javascript技巧

javascript键盘上下键的操作(选择)_javascript技巧

WBOY

Lepaskan： 2016-05-16 19:04:02

asal

1728 orang telah melayarinya

两段使用键盘的上下键进行选择的代码：
第一段

<script language="JScript">  
      function document.onkeydown(){  
         var rowsArray = document.all('oTable').rows;  
         for(var i=0;i<rowsArray.length;i++){  
              if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){  
                 switch(window.event.keyCode){  
                     case 38 :  
                         if(i-1>=0){  
                           rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc';   
                           rowsArray[i].children[0].style.backgroundColor = '';  
                         }  
                         break;  
                     case 40 :  
                         if(i+1<=rowsArray.length-1){  
                            rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc';    
                            rowsArray[i].children[0].style.backgroundColor = '';  
                         }  
                         break;  
                 }  
                 break;  
              }  
         }  
      }  
      function document.onclick(){  
          if(window.event.srcElement.tagName!='TD'){ return; }  
          var rowsArray = document.all('oTable').rows;  
          for(var i=0;i<rowsArray.length;i++){  
               if(rowsArray[i].cells[0]==window.event.srcElement){  
                  rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc';  
               }else{  
                  rowsArray[i].cells[0].style.backgroundColor = '';  
               }  
          }            
      }  
</script>  
<style> TD { cursor: hand; } </style>  
<table id="oTable" style="width:240px;border:1px highlight solid; font-size:12px;">  
     <tr>  
         <td style="background-color:#dcdcdc;">鼠标点击或按↑↓改变行的颜色</td>  
     </tr>  
     <tr>  
         <td>鼠标点击或按↑↓改变行的颜色</td>  
     </tr>  
     <tr>  
         <td>鼠标点击或按↑↓改变行的颜色</td>  
     </tr>  
     <tr>  
         <td>鼠标点击或按↑↓改变行的颜色</td>  
     </tr>  
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

第二段

<table id="tb">   
<tr>
<td>00000000000000</td>   
</tr>   
<tr>
<td>11111111111111</td>   
</tr>   
<tr><td>22222222222222</td></tr>   
<tr><td>33333333333333</td></tr>   
</table>   
<script>   
var i=0;   
function document.onkeydown(){   
    if (event.keyCode == 38){   
        for(var k=0;k<document.getElementById('tb').rows.length;k++){   
            document.getElementById('tb').rows(k).bgColor="";   
        }   
        document.getElementById('tb').rows(--i%tb.rows.length).bgColor="#FF0000";   
        document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText;   
    }   
    if (event.keyCode== 40){   
        for(var k=0;k<document.getElementById('tb').rows.length;k++){   
            document.getElementById('tb').rows(k).bgColor="";   
        }   
        document.getElementById('tb').rows(++i%document.getElementById('tb').rows.length).bgColor="#FF0000";   
        document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText;   
        }   
}   
</script>   
<input type="text" name="show" value="do">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

javascript papan kekunci

sumber：php.cn

Artikel sebelumnya：javascript 容错处理代码(屏蔽js错误)_javascript技巧 Artikel seterusnya：javascript搜索自动提示功能的实现_javascript技巧

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}

daripada 2024-04-06 19:25:49

0

1

505

Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...

daripada 2024-04-06 18:16:26

0

1

403

Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

daripada 2024-04-06 15:35:24

0

1

274

Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...

daripada 2024-04-06 14:54:03

0

2

421

Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...

daripada 2024-04-06 12:53:11

0

1

376

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan