社群學習工具庫休閒

繁体中文

首頁 > web前端 > js教程 > 键盘上下键移动选择table表格行的js代码_javascript技巧

键盘上下键移动选择table表格行的js代码_javascript技巧

WBOY

發布： 2016-05-16 18:38:11

原創

1289 人瀏覽過

键盘上下键移动选择table表格行的js代码_javascript技巧

//这是要操作的表格： 
<table id="tb"> 
<tr>
<td>这是第一行</td> </tr> 
<tr>
<td>这是第二行</td> </tr> 
<tr><td>这是第三行</td></tr> 
<tr><td>这是第四行</td></tr> 
</table> 
//这是操作表格的代码 
<script> 
var rowNo= -1; 
var tableId = 'tb'; 
var inputId = 'show'; 
var selectedColor = "#FF0000" 
function document.onkeydown() 
{ 
//事件的标识代码 
if (event.keyCode == 38) 
{ 
for(var k=0;k<document.getElementById(tableId).rows.length;k++) 
{ 
document.getElementById(tableId).rows(k).bgColor="#FFFFFF"; 
} 
if(rowNo == 0) 
{ 
rowNo++; 
} 
document.getElementById(tableId).rows(--rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor; 
document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText; 
} 
//事件的标识代码 
if (event.keyCode== 40) 
{ 
for(var k=0;k<document.getElementById(tableId).rows.length;k++) 
{ 
document.getElementById(tableId).rows(k).bgColor="#FFFFFF"; 
} 
document.getElementById(tableId).rows(++rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor; 
document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText; 
} 
} 
</script> 
<input type="text" id="show" value="do">

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

相關標籤：

表格行

來源：php.cn

上一篇：javascript 格式化时间日期函数代码脚本之家修正版_时间日期下一篇：IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点_javascript技巧

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

什麼是 NullPointerException，如何修復它？

2024-10-22 09:46:29
從新手到程式設計師：您的旅程從 C 基礎知識開始

2024-10-13 13:53:41
使用 PHP 解鎖 Web 開發：初學者指南

2024-10-12 12:15:51
揭秘 C：為新程式設計師提供一條清晰簡單的道路

2024-10-11 22:47:31
釋放您的編碼潛力：絕對初學者的 C 編程

2024-10-11 19:36:51
釋放你內心的程式設計師：C 絕對初學者

2024-10-11 15:50:41
使用 C 自動化您的生活：適合初學者的腳本和工具

2024-10-11 15:07:41
PHP 變得簡單：Web 開發的第一步

2024-10-11 14:21:21
使用 Python 建立任何東西：釋放創造力的初學者指南

2024-10-11 12:59:11
編碼的關鍵：為初學者釋放 Python 的力量

2024-10-11 12:17:31

最新問題

MySQL：'從......中選擇文字作為<此處變數或子查詢>” 我有下表，其中包含以下數據：id文本語言1德語文本德語2英文文本英語我想要的是獲得以下格式的結果：german="deutschertext"english=&...

來自於 2024-04-06 19:25:54

0

2

529

ReactJs：使用映射函數後我的父數組得到更新我正在嘗試在數組中插入新的鍵，這些鍵基本上是從父數組中提取的。我找不到僅僅通過將新密鑰插入到提取的數組中就會導致商店內的主數組發生變化的原因。這是我嘗試在自訂陣列中新增鍵值對的方法...

來自於 2024-04-03 20:04:17

0

1

352

如何修復react中關於狀態的這個錯誤？我想做一個簡單的反應應用程序，當我在一個區塊上按回車鍵時，一個新區塊將顯示在該區塊下，而後面的其餘部分將在新區塊下。但是當有多個區塊時，當我在前一個區塊上按下回車鍵時，後一個區塊就...

來自於 2024-04-01 09:32:43

0

1

329

畫布顯示空白？我正在嘗試將關鍵點渲染到可以從BlazePose獲得的畫布上，但我似乎無法讓他們繪製畫布。我知道每個關鍵點的x和y並被檢索，但我無法讓它們顯示在畫布上。我嘗試過改變樣式，但到目前為...

來自於 2024-03-31 17:20:31

0

1

388

如何在反應打字稿中輸入道具？如何在ReactTypeScript中輸入props？我收到錯誤屬性“authors”在類型“[Props]&{children?:ReactNode;上不存在”}'.ts...

來自於 2024-03-31 15:34:36

0

2

262

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1421217
php入門教程之一週學會PHP

4264879
JAVA 初級入門影片教學

2515771
小甲魚零基礎入門學習Python影片教學

506172
PHP 零基礎入門教學

861285

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板