用JS效果做到有上和下按钮点击控制textbox中显示的是上一条和下一条数据

 谁有好的实例可以发来分享一下么？  数据可以先模拟预存一点数据...急急！！ 求解.............

解决方案 »

  1.   

    如果说可以预存一些数据，就是用数组，上下时切换数组元素就可以了。但如果要求从数据库即时提取数据的话，要么用AJAX取然后无刷新更改显示，要么直接把当前ID和操作行为（上或下一条）传给后台处理。都挺基础，接参，查询，随便找个这样的例子，改一改就成了，如果这个自己不能做成，还不去学，就奇怪了，不是你的活就让别人做，是自己的活就先学会再说。
      

  2.   

       <input type=button value='上' onclick='pre()'>
    <input id='txt'/>
    <input type=button value='下' onclick='next()'> 
    <script>
    var arr=['1','2','3','4'];
    var index = 0;
    var txt = document.getElementById('txt');
    function pre()
    {
    index =index >0? --index:0;
    txt.value=arr[index];
    }
    function next()
    {
    index =index <arr.length-1 ? ++index : arr.length-1;
    txt.value=arr[index];
    }
    </script>
      

  3.   

    这个是我现在写的但是有点问题，问题一：就是当我点“下一条”时我再点“上一条”他还会再往下读取一条然后才往上读取。 问题二：当他读到最后一条或第一条时再往下或往上读取就给出提示“已经到顶了”。 就这两个问题哪位朋友把下面代码复制然后帮我看看  看能否解决这两个问题............<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript"> 
    var index=0;
    function up(){
        
    var _table = document.getElementById("tab");
    var _tr = _table.rows[index];
    var _td = _tr.cells[0];
    document.getElementById("text").value = _td.innerHTML;
    index--;
    if(index<0){
    index=_table.rows.length-1;
    }

    }
    function down(){

    var _table = document.getElementById("tab");
    var _tr = _table.rows[index];
    var _td = _tr.cells[0];
    document.getElementById("text").value = _td.innerHTML;
    index++;
    if(index>=_table.rows.length){
    index=0;
    }
    }
    </script>
    </head>
    <body>
    <form name="" action="" method="post">
    <fieldset style="height:100%;">
    <table id="tab"> 
    <tr> 
    <td>第一条</td> 
    </tr> 
    <tr> 
    <td>第二条</td> 
    </tr> 
    <tr> 
    <td>第三条</td> 
    </tr> 
    <tr> 
    <td>第四条</td> 
    </tr> 
    <tr> 
    <td>第五条</td> 
    </tr> 
    <tr> 
    <td>第六条</td> 
    </tr> 
    </table>
    <input type="text" id="text" name="t1" value="" />
    <input type="button" name="bup" onClick="down()" value="向下" />
    <input type="button" name="bdown" onClick="up()" value="向上" />
    </fieldset>
    </form>
    </body>
    </html> 
      

  4.   

     是否应该给每条数据定义一个ID ,然后向上或向下时让他记住前后两条的位置.....等待高手来解决,,能用jQuery 实现类似的功能也可以....急   求解！
      

  5.   

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>
    <body>
    <form name="" action="" method="post">
    <fieldset style="height:100%;">
    <table id="tab">  
    <tr>  
    <td>第一条</td>  
    </tr>  
    <tr>  
    <td>第二条</td>  
    </tr>  
    <tr>  
    <td>第三条</td>  
    </tr>  
    <tr>  
    <td>第四条</td>  
    </tr>  
    <tr>  
    <td>第五条</td>  
    </tr>  
    <tr>  
    <td>第六条</td>  
    </tr>  
    </table>
    <input type="text" id="text" name="t1" value="第一条" />
    <input type="button" name="bup" onClick="down()" value="向下" />
    <input type="button" name="bdown" onClick="up()" value="向上" />
    </fieldset>
    </form>
    </body>
    <script type="text/javascript">  
    var _table = document.getElementById("tab");
    var index=1,is_true = true;
    function up(){
    if(index!=0 && is_true){index--;is_true = false;}
    if(_table.rows[index - 1]){

    var _tr = _table.rows[index - 1];
    var _td = _tr.cells[0];
    document.getElementById("text").value = _td.innerHTML;
    index--;
    }else{
    alert('到头了')
    }}
    function down(){
    if(!is_true){index++;is_true = true;}
    if(_table.rows[index + 1] || index + 1 == _table.rows.length){var _tr = _table.rows[index];
    var _td = _tr.cells[0];
    document.getElementById("text").value = _td.innerHTML;
    index++;

    }else{
    alert('到底了');

    }}
    </script>
    </html>