我现在是想用LISTBOX加上JAVASCRIPT来实现TABLE的效果,并且能增加删除行,请各位指点怎样做.我开始是用空格来分隔两个字附串,如A   |B 在LISBOX显示,但这样的效果客户不接受,请各位帮忙.

解决方案 »

  1.   

    动态改变SELECT列表中项的位置(可多选) 
     water_chestnut 发表于 2003-6-11 18:24:20 Script编程 ←返回版面         [快速返回] 搞了半天,献给大家!
    测试环境:windows2K,IE6.0
    ---------------------------------------------------
    <html>
    <head>
    <title>调整</title>
    <link rel="stylesheet" href="../../../main2.css" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <script language="JavaScript">
           function IsSelect(){
                      if (document.formlist.IndexList.selectedIndex==-1){
                         alert("请选择一项!");
                         return false;
                      }
                return true;
           }
           function UpList(i){
                var  TempText  //临时存放的名字
                var  TempValue //临时存放的值
                //alert(i)
                if (i==0){
                   alert(document.formlist.IndexList.options(i).text + "已经到顶了!");
                   return false;
                }
                TempText=document.formlist.IndexList.options(i).text;
                TempValue=document.formlist.IndexList.options(i).value;
                document.formlist.IndexList.options(i).text=document.formlist.IndexList.options(i-1).text;
                document.formlist.IndexList.options(i).value=document.formlist.IndexList.options(i-1).value;
                document.formlist.IndexList.options(i-1).text=TempText;
                document.formlist.IndexList.options(i-1).value=TempValue;            document.formlist.IndexList.options(i-1).selected=true;
                document.formlist.IndexList.options(i).selected=false;
                TempText="";
                Tempvalue="";
                return true;
            }
            function DownList(i){
                var  TempText  //临时存放的名字
                var  TempValue //临时存放的值
                //alert(i)
                if (i==document.formlist.IndexList.length-1){
                   alert(document.formlist.IndexList.options(i).text + "已到底了!");
                   return false;
                }
                TempText=document.formlist.IndexList.options(i).text;
                TempValue=document.formlist.IndexList.options(i).value;
                document.formlist.IndexList.options(i).text=document.formlist.IndexList.options(i+1).text;
                document.formlist.IndexList.options(i).value=document.formlist.IndexList.options(i+1).value;
                document.formlist.IndexList.options(i+1).text=TempText;
                document.formlist.IndexList.options(i+1).value=TempValue;
                document.formlist.IndexList.options(i+1).selected=true;
                document.formlist.IndexList.options(i).selected=false;
                TempText="";
                Tempvalue="";
                return true;
            }
                    function MoveList(ActionType)
            {
                var i;
                i=0;
                 //判断是否有选中项
                if (!IsSelect()){  
                    return false;
                }
                //alert(ActionType);
                //判断操作类型
                if (ActionType=="up"){   
                    for (i=0;i<document.formlist.IndexList.length;i++){
                         if (document.formlist.IndexList.options[i].selected){
                             if    (!UpList(i))
                                 return;                         
                         }
                    }
                }
                //判断操作类型    
                if (ActionType=="down") {
                     for (i=document.formlist.IndexList.length-1;i>=0;i--){ 
                        if (document.formlist.IndexList.options[i].selected){
                             if (!DownList(i))
                                 return;
                         }                
                     }
                 }
            }
            
            function Update(){
                for (i=0;i<document.formlist.IndexList.length;i++){ 
                    if (document.formlist.IndexList.options[i].selected==false){
                    document.formlist.IndexList.options[i].selected=true;
                    }        
                 }
                 document.formlist.submit();
            }
            function dbClick(ActionType){
                MoveList(ActionType);
            }
    </script>
    <body leftmargin="0" topmargin="0" background="../../../images/bg01.gif">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tdcolor1" height="18" align="center">
      <tr align="right" valign="middle"> 
        <td height="18" colspan="2" align="left" class="tdcolor1"> </td>
      </tr>
    </table>
    <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
      <tr class="tdcolor2"> 
        <td height="20">  </td>
        <td height="20" align="right">  </td>
      </tr>
      <tr class="tdcolor3"> 
        <td height="2"></td>
        <td height="2"></td>
      </tr>
    </table>
    <br>
    <table width="90%" border="0" align="center">
      <form name="formlist" method="post" action="UpDateListIndex.asp"><tr> 
          <td width="54%" valign="top" > 
            <select name="IndexList" size="16" multiple id="IndexList"   style="width:300;background-color: #FFCC00">
              <option value="1">第1列</option>
              <option value="2">第2列</option>
              <option value="3">第3列</option>
              <option value="4">第4列</option>
              <option value="5">第5列</option>
              <option value="6">第6列</option>
            </select>
          </td>
          <td width="46%" valign="top"> <input type="button" name="Button" value="置顶" style="height:50;width:70">
            <br>
            <input name="UPButton" type="button" id="UPButton" value="▲ 上移" onClick=" MoveList('up')" style="height:50;width:70" onDblClick="dbClick('up')">
            <br>
            <input name="DownButton" type="button" id="DownButton" value="▼ 下移" onClick="MoveList('down')" style="height:50;width:70" onDblClick="dbClick('down')">
            <br>
            <input type="button" name="Submit2" value="置底" style="height:50;width:70">
            <br>
          </td>
      </tr>
        <tr> 
          <td colspan="2"> </td>
      </tr></form>
    </table>
    </body>
    </html>