百分求解面试题（javascrpit)

今天去面试给我出了俩到题其中一道是这样的
————|           —————|
       |    》》    |        |      
       |   《《     |        |
       |           |        |
————              —————如图：要求用javascript 实现 ，左边框的数据可以移动到右边，右边的同样可以移到左边！！
请高手的帮帮忙，最好把思路和操作步骤，和代码都给我！！！

解决方案 »

  1.   

    那个很简单的
    按左按钮出发一个事件
    完左边的selectdocument.getElementById("idName").options.add(new Option(text,value));document.getElementById("idName").options.remove(indx);删除
      

  2.   

    不难啊,左边右边其实都是一个table,然后一行一行tr,左边移到右边，就是获取tr那行用insertrows和insertcells好象是这两个方法，往右边插一行过去,然后左边用deleterows方法把那行删了,同理,右边也可以往左边移~具体获取可以用dom操作的方法获取
    document.getElementById("table").insertRow(-1);
    document.getElementById("table").deleteRow(-1);
      

  3.   

    就是左右都是俩个文本框，中间是俩个按钮分别是：左移，右移 点击左移将左边选择的项移到到右边，点击右移同理：这回明白了吧，用javascript实现
      

  4.   


    对，实际上就是select控件
      

  5.   

    var obj=document.getElementById("left");
    var r=document.selection.CreateRange()
    obj.value=r.text;
      

  6.   

    】修改下 
    r=document.selection.createRange();
    就是按按钮以后 
    比如左边就 
    document.getElementById("left").value
    然后给右边
    如果不是左边是 选择中的左边的
    就用
    r=document.selection.createRange().text;
    然后 右边的就等于
    document.getElementById("right").value=r;
      

  7.   

    可以先保存阿，然后再放到新的innerHtml里面
      

  8.   

    左右到底是什么控件，是文本框，还是表格，怎么叫左边框从数据源动态获得数据，就是当进入aspx页面的时候，左边自动出现数据（纵向排列），当点击左移的时候向你说的那样在按钮上编写代码移到到右边
      

  9.   

    估计就是左右二个SELECT , 左右互移而已...
      

  10.   

    唉 如果是
    <asp:DropDownList
     就更简单了 
    lz 说清楚吧
    左边随便是什么啊
    文本框 
    select 都行原理都一样
      

  11.   

    思路：
    定义2个数组分别存储左右数据
    定义刷新信息函数将两数组数据加载到两方框中
    数组信息添加函数
    数组信息删除函数
    参考：
    //定义数组
    var leftListA=new Array();
    var rightListA=new Array();
    //添加
    leftListA.push(o1);
    rightListA.push(o2);
    //删除
    leftListA=leftListA.del(i);
    leftListA=leftListA.del(i);/**********************************/
    //JS数组扩展删除函数
    Array.prototype.del=function(n) { //n表示第几项，从0开始算起。
    //prototype为对象原型，注意这里为对象增加自定义方法的方法。
    if(n<0) //如果n<0，则不进行任何操作。
        return this;
    else
        return this.slice(0,n).concat(this.slice(n+1,this.length));
        /*
          concat方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
          　　　　　　这里就是返回this.slice(0,n)/this.slice(n+1,this.length)
         　　　　　　组成的新数组，这中间，刚好少了第n项。
          slice方法： 返回一个数组的一段，两个参数，分别指定开始和结束的位置。
        */
    }
      

  12.   

    以前写的一个东西，假若用ListBox的话，可以试试，尝试一下在ListBox里面加几个项看看~~<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
            //移动项
            function moveItem(_sourceIn, _sourceOut)
            {
                for(var j=_sourceOut.length-1;j>=0;j--)
                {
                    if(_sourceOut.options[j].selected)
                    {
                        _sourceIn.options.add(new Option(_sourceOut.options[j].text,_sourceOut.options[j].value))
                        _sourceOut.options.remove(j);
                    }
                }
            }
            
        </script>
    </head>
    <body>
        <form id="Form1" method="post"  runat="server">
    <table cellspacing="0" id="MainTable" width="100%">
    <tr>
        <td class="LeftTitle">Members：</td>
        <td colspan="3">
            <table cellpadding="0" cellspacing="0">
                <tr><td style="border:0" colspan="3">(The members in left side are in the group.)</td></tr>
                <tr>
                    <td style="border-width:0px;">
                    <asp:ListBox ID="lbInMember" SelectionMode="Multiple" CssClass="ListBox" runat="server"></asp:ListBox></td>
                    <td style="border-width:0px;"><div>
                        <input type="button" value="===>" onclick="moveItem(document.getElementById('lbOutMember'),document.getElementById('lbInMember'))" />
                        <br />
                        <br />
                        <input type="button" value="<===" onclick="moveItem(document.getElementById('lbInMember'),document.getElementById('lbOutMember'))" />
                        </div></td>
                    <td style="border-width:0px;"><asp:ListBox ID="lbOutMember" runat="server" CssClass="ListBox" SelectionMode="Multiple"></asp:ListBox> </td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
      

  13.   


    5555，太谢谢了写的非常详细！！再想请问一下，listbox中的项可以从数据源获得吗？而不是手动添加？？？
      

  14.   


    当然可以。
    listbox1.Items.Clear();   
    listbox1.DataSource   =   dt.Tables["Product_Spec"];   
    listbox1.DisplayMember   =   "Spec_Name";     //其中的一个字段   
    listbox1.ValueMember   =   "Spec_Id";             //其中的一个字段   
    listbox1.DataBind();
      

  15.   


    喂 说的是js怎么搞到runatserver去了
    跑题了~~
      

  16.   


    用JS只是实现无刷新地交换选项，绑定数据就没有必要用JS了，
    那些Item本来就从数据源获取的，我只是没有贴后台代码而已，要不然就没有必要用WebControl了