communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > 键盘上下键移动选择table表格行的js代码_javascript技巧

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

WBOY

Libérer： 2016-05-16 18:38:11

original

1290 Les gens l'ont consulté

键盘上下键移动选择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需刷新才能执行]

Étiquettes associées：

ligne du tableau

source：php.cn

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

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

MySQL : "Sélectionnez le texte de... comme <variable ici ou sous-requête>" J'ai le tableau suivant avec les données suivantes : id texte langue 1 texte allemand alle...

Depuis 2024-04-06 19:25:54

0

2

529

ReactJs : Mon tableau parent est mis à jour après avoir utilisé la fonction map J'essaie d'insérer de nouvelles clés dans un tableau qui sont essentiellement extraites du...

Depuis 2024-04-03 20:04:17

0

1

352

Comment corriger cette erreur concernant l'état en réaction ? Je veux créer une application de réaction simple dans laquelle lorsque j'appuie sur Entrée...

Depuis 2024-04-01 09:32:43

0

1

329

Le canevas semble vide ? J'essaie de restituer les clés sur un canevas que je peux obtenir de BlazePose, mais je n'...

Depuis 2024-03-31 17:20:31

0

1

388

Comment saisir des accessoires dans React TypeScript ? Comment saisir des accessoires dans ReactTypeScript ? J'obtiens l'erreur La propriété « au...

Depuis 2024-03-31 15:34:36

0

2

262

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal