如何实现点击表格行显示提示？

由于有一个数据库表的字段有17个，如果全部显示的话太多了，所以想只显示几个重要的字段
然后通过双击可以进入查看所有的字段(已经通过<tr ondblclick="parent.location='url'">实现了)
现在想要让用户单击行的时候会出现提示(如，"双击查看详细信息")本来是想移动到行的时候onMouseOver就显示提示
但是想想那会不会太快了(或者先判断在行中停留超过1秒才提示)
或者是有什么办法显示，在表格中(不要求是在哪一行，只要在表格内就行)停留超过2秒以上，就显示提示
希望不使用第三方库实现，就纯JS脚本

解决方案 »

  1.   

    L@_@K
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD> <BODY>
        <table id="productTable" border="1">
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>1</td>
                <td>pen</td>
                <td>1.0</td>
            </tr>
            <tr>
                <td>2</td>
                <td>ballpen</td>
                <td>2.0</td>
            </tr>
            <tr>
                <td>3</td>
                <td>pencil</td>
                <td>0.5</td>
            </tr>
        </table>
     </BODY>
     <SCRIPT LANGUAGE="JavaScript">
     <!--
    var output = document.getElementById("output");var productTable = document.getElementById("productTable");var oRow;
    var startRowIndex = 1;
    for (var i=startRowIndex, len=productTable.rows.length; i<len; i++)
    {
        oRow = productTable.rows[i];
        oRow.onmouseover = function() {
            SetTimeoutTipOnMouseover("双击查看详细信息", 1);
        };
        oRow.onmouseout = function() {
            ClearTimeoutTipOnMouseout();
        };
    }function SetTimeoutTipOnMouseover(sTip, iSeconds, target) {
        if (target === undefined)
            target = this;
        target.TimerID = window.setTimeout("alert('"+sTip+"')", 1000*iSeconds);
    }function ClearTimeoutTipOnMouseout(target) {
        if (target === undefined)
            target = this;
        if (target.TimerID > 0)
            window.clearTimeout(target.TimerID)
    }
     //-->
     </SCRIPT>
    </HTML>
      

  2.   


         function setCss(elem, style) {
             for (var i in style) elem.style[i] = style[i];
         }
         
         function createTip() {
             var tip = document.createElement('div');
             setCss(tip, { border: 'solid 1px #217AC1', backgroundColor: '#fefbc5', padding: '4px',
                 position: 'absolute', display: 'none'
             });
             document.body.appendChild(tip);
             window.tip = tip;
         }     var handle = null;
         function attachEvent(elem) {
             elem.onmouseover = function(e) {
                 e = e || window.event; ;
                 var ee = {
                     target: e.srcElement ? e.srcElement : e.target,
                     x: (e.x ? e.x : e.pageX) + 4,
                     y: (e.y ? e.y : e.pageY) + 4
                 }
                 handle = setTimeout(function() { showTip(ee) }, 2000);
             }
             elem.onmouseout = function() {
                 if (handle) clearTimeout(handle);
                 tip.style.display = 'none';
             }
         }
         
         function showTip(e) {
             if (e.target.tagName != 'TD') return;
             tip.innerHTML = e.target.innerHTML;
             setCss(tip, { left: e.x, top: e.y, display: '' });
         }     window.onload = function() {
             createTip();
             attachEvent(document.getElementById('productTable'));
         }
      

  3.   

    楼主已经对tr使用了dblclick事件，为何不考虑使用click事件或者使用title属性？如果鼠标移动到行上2s后才显示提示的话，个人觉得已经偏晚了，2s已经是很长的时间可以做很多动作，用户可能等不到提示就离开了。
      

  4.   

    .........
    没留意到tr可以使用title属性...