50求一JS

和 hookee 代码相似,稍微不同,LZ可以试试<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <META http-equiv="Content-Style-Type" content="text/css">
    </head>
     <script language=javascript>
            var t, n, c;
            var lastrow;
            function doit(){
                if(event.keyCode==38){
                    if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";
                    if(c==null) c=0;
                    else if(c==0) c=n-1;
                    else c--;
                    t.rows[c].style.backgroundColor = "#cceeff";
                }
                else if(event.keyCode==40){
                    if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";
                    if(c==null) c=0;
                    else if(c==n-1) c=0;
                    else c++;
                    t.rows[c].style.backgroundColor = "#cceeff";
                }
            }
            window.onload=function(){
                t = document.getElementById("tb");
                n = t.rows.length;
                for(var i=0;i<n;i++){
                    t.rows[i].ondblclick = function(){
                        for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"
                        this.style.backgroundColor="#cceeff";
                        alert(this.parentNode.innerHTML)
                    };
                }
                document.onkeyup = doit;
            }
        </script>
    <body >
               <table id="tb" border=1px gray>
            <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
            <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
            <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
            <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
            <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
        </table>    </body>
</html>

写个jquery的
test.htm<style type="text/css">
.tr_selected{background-color:#999999;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script >
//jquery-1.3.2.js 可以到jquery官网下载
function trClick(obj){
$('tr.tr_selected').removeClass("tr_selected");
$(obj).addClass("tr_selected");
}
function trDblClick(obj){
var name=$(obj).children(".name").text();
var age=$(obj).children(".age").text();
alert("name:"+name+"\n age:"+age);
}
function trKeyDown(){
if ( event.keyCode=='38' )//上
$(".tr_selected").prev("tr:last").click();
if ( event.keyCode=='40' )//下
$(".tr_selected").next("tr:first").click();
if ( event.keyCode=='13' )//回车
$(".tr_selected").dblclick();
}
</script>
<table onKeyDown="trKeyDown();">
<thead><tr id="cat"><td style="width:200px;">name</td><td style="width:200px;">age</td></tr></thead>
<tbody>
<tr id="tr1" class="tr_selected" onclick="trClick(this);"  onDblClick="trDblClick(this);">
<td class="name">aaa</td><td class="age">11</td></tr>
<tr id="tr2" onclick="trClick(this);"  onDblClick="trDblClick(this);">
<td class="name">bbb</td><td class="age">22</td></tr>
<tr id="tr3" onclick="trClick(this);"  onDblClick="trDblClick(this);">
<td class="name">ccc</td><td class="age">33</td></tr>
<tr id="tr4" onclick="trClick(this);"  onDblClick="trDblClick(this);">
<td class="name">ddd</td><td class="age">44</td></tr>
</tbody>
</table>

   $(document).ready(function() {
            var count = $("#table1 tr").length;
            var position = 0;
            $("#table1 tr:first-child").css("backgroundColor", "red");
            $(document.body).bind("keyup", function() {
                var key = event.keyCode;
                if (key == 38) {
                    position--;
                    if (position < count - 1) {
                        $("#table1 tr").eq(position).css("backgroundColor", "red");
                        $("#table1 tr").eq(position).next().css("backgroundColor", "white");
                    }
                }
                if (key == 40) {
                    position++;
                    if (position >= 0) {
                        $("#table1 tr").eq(position).css("backgroundColor", "red");
                        $("#table1 tr").eq(position).prev().css("backgroundColor", "white");
                    }
                }
            });
        });
<table id="table1">
          <tr>
              <td>Dog</td>
          </tr>
          <tr>
              <td>Mat</td>
          </tr>
            <tr>
              <td>Tigger</td>
          </tr>
       </table>

不好意思上面的代码不全，从新发一下：  $(document).ready(function() {
            var count = $("#table1 tr").length;
            var position = 0;
            $("#table1 tr:first-child").css("backgroundColor", "red");
            $("#table1 tr:first-child").dblclick(function() {
                alert($(this).html());
            });
            $(document.body).bind("keyup", function() {
                var key = event.keyCode;
                if (key == 38) {
                    position--;
                    if (position < count - 1) {
                        $("#table1 tr").eq(position).css("backgroundColor", "red");
                        $("#table1 tr").eq(position).dblclick(function() {
                            alert($(this).html());
                        });
                        $("#table1 tr").eq(position).next().css("backgroundColor", "white");
                        $("#table1 tr").eq(position).next().unbind("dblclick");
                    }
                }
                if (key == 40) {
                    position++;
                    if (position >= 0) {
                        $("#table1 tr").eq(position).css("backgroundColor", "red");
                        $("#table1 tr").eq(position).dblclick(function() {
                            alert($(this).html());
                        });
                        $("#table1 tr").eq(position).prev().css("backgroundColor", "white");
                        $("#table1 tr").eq(position).prev().unbind("dblclick");
                    }
                }
            });
        });

解决方案 »