javascript 实现单双击选中行

用Table显示了数据列表, 默认选中第一行，这行的颜色不同；
单击一行被选中颜色改变，其他行的变回原来的颜色。
双击一行这行改变颜色其他行变回原来颜色，然后跳转到详细信息页面；
单击详细按钮跳转到选中行的详细信息页。jsp+javascript。
谢谢大家了，
分不够可以加

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <style>
  #otbl {
font-size: 12px;
text-align: center;
border: 1px solid #C5C5C5;
border-collapse: collapse;
  }
  #otbl td {
border: 1px solid #C5C5C5;
width: 80px;
height: 20px;
  }  #otbl thead td{
background-color: #B9B9B9;
  }
  </style>
</head>
<script type="text/javascript">

</script> <body>
<table id="otbl" onclick="changeColor(event)">
<thead>
<td>Name</td>
<td>Age</td>
<td>Sex</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
</table>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <style>
  #otbl {
font-size: 12px;
text-align: center;
border: 1px solid #C5C5C5;
border-collapse: collapse;
  }
  #otbl td {
border: 1px solid #C5C5C5;
width: 80px;
height: 20px;
  }  #otbl thead td{
background-color: #B9B9B9;
  }
  </style>
</head>
<script type="text/javascript">

</script> <body>
<table id="otbl" onclick="changeColor(event)" ondblclick="changeColor(event)">
<thead>
<td>Name</td>
<td>Age</td>
<td>Sex</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
</table>

</body>
</html>
<style>
  .select {
    background: gray;
  }
  .unselect {
    background: blue;
   cursor: pointer;
  }
</style>
<table id="my_table">
  <tr class='select' onclick="changC(this)" ondblclick="deal(this)">
    <td>百度</td>
  </tr>
  <tr class='unselect' onclick="changC(this)" ondblclick="deal(this)">
    <td>google</td>
  </tr>
  <tr class='unselect' onclick="changC(this)" ondblclick="deal(this)">
    <td>新浪</td>
  </tr>
</table>
<script>
var urls = ['http://www.baidu.com','http://www.google.com','http://www.sina.com'];
var classN = '';
   function changC(obj) {
     classN = obj.className;
     obj.className = 'select';
     for(var i = 0; i < obj.parentNode.childNodes.length; i++) {
     if(i != obj.rowIndex) {
       obj.parentNode.childNodes[i].className = 'unselect';
     }
   }
  }  function deal(obj) {
  location.href = urls[obj.rowIndex];
  }  /*
   //如果需要已经选中的事件不响应双击后跳转页面
   function deal(obj) {
   if(classN == 'select') {
    return;
  }
  location.href = urls[obj.rowIndex];
  }
  */
</script>

   看看是不是这样？？
选中的时候要取得选中的行一个orderID吧，放到地址栏里才能显示明细页面。点击详细按钮也得去选中行的orderID
<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";
                    };
                }
                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>
以上是双J,要单J的话改成<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].onclick = function(){
                        for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"
                        this.style.backgroundColor="#cceeff";
                    };
                }
                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>
<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 uid=$(obj).children(".uid").text();
alert("name:"+name+"\n uid:"+uid);//获取行内数据
window.open("detail.jsp?uid="+uid);//
}
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><td style="width:200px;">name</td><td style="width:200px;">uid</td></tr>
</thead>
<tbody>
<tr class="tr_selected" onclick="trClick(this);"  onDblClick="trDblClick(this);"><td class="name">aa</td><td class="uid">1</td></tr>
<tr onclick="trClick(this);"  onDblClick="trDblClick(this);"><td class="name">bb</td><td class="uid">2</td></tr>
<tr onclick="trClick(this);"  onDblClick="trDblClick(this);"><td class="name">cc</td><td class="uid">3</td></tr>
<tr onclick="trClick(this);"  onDblClick="trDblClick(this);"><td class="name">dd</td><td class="uid">4</td></tr>
</tbody>
</table>
楼主写得不错.
但web页面中, 不应该出现双击的用户体验.
web也会出现双击，这方面外国有些是这样