javascript上下方向鍵控制表格行選中并高亮顯示的方法
更新時(shí)間:2015年02月13日 15:21:17 作者:apollokk
這篇文章主要介紹了javascript上下方向鍵控制表格行選中并高亮顯示的方法,涉及javascript針對鍵盤按鍵操作相應(yīng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript上下方向鍵控制表格行選中并高亮顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<style>
tr.highlight {
background:#08246B;
color:white;
}
</style>
<table border="1" width="70%" id="ice">
<tr onClick="selectTR();return false;">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tr onClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tr onClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tr onClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
<tr onClick="selectTR();">
<td>123</td>
<td>234</td>
<td>abc</td>
<td>def</td>
</tr>
</table>
<script language="javascript">
<!--
var currentLine = -1;
document.onkeydown = function(e)
{
e = window.event || e;
switch(e.keyCode)
{
case 38:
currentLine--;
changeItem();
break;
case 40:
currentLine++;
changeItem();
break;
default:
break;
}
}
function selectTR()
{
currentLine=window.event.srcElement.parentElement.rowIndex;
//alert(currentLine);
changeItem();
}
//改變選擇項(xiàng)目
function changeItem()
{
if(document.all)
var it = document.getElementById("ice").children[0];
else
var it = document.getElementById("ice");
for(i=0;i<it.rows.length;i++)
{
it.rows[i].className = "";
}
if(currentLine < 0)
currentLine = it.rows.length - 1;
if(currentLine == it.rows.length)
currentLine = 0;
it.rows[currentLine].className = "highlight";
}
//-->
</script>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊
本文通過純javascript技術(shù)實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊,支持移動(dòng)設(shè)備手勢操作,感興趣的朋友一起來學(xué)習(xí)吧2015-08-08
JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】
這篇文章主要介紹了JavaScript計(jì)時(shí)器用法,結(jié)合實(shí)例形式分析了setTimeout和clearTimeout函數(shù)的具體使用技巧,需要的朋友可以參考下2017-01-01
js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
頁面圖片浮動(dòng)左右滑動(dòng)效果的簡單實(shí)現(xiàn)案例
本篇文章主要是對頁面圖片浮動(dòng)左右滑動(dòng)效果的簡單實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02

