双向选择列表框

最新推荐文章于 2023-05-09 11:03:03 发布
最新推荐文章于 2023-05-09 11:03:03 发布
阅读量2.3k 收藏
点赞数
分类专栏： # Web开发 文章标签： function input div float button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cscj2010/article/details/7460367
版权 
代码出自《JavaScript 典型应用与最佳实践》，敲完后花个来钟头终于纠正了其中一些错误。在IE中算是正常了，不过在VS2008中给了一些不符合HTML4.01标准的错误
就不理了。






<html>
<head>
    <title>双向选择列表</title>
	<style type="text/css">
          body
          {
          	text-align:center;
          }
          p
          {
          	text-align:center;
          }
          #wrap
          {
          	width:800px;
          	margin:0 auto;
          	text-align:left;
          	position:relative;
          }
          #buttonArea
          {
          	width:100px;
          	float:left;
          }
          #leftPanel
          {
          	width:350px;
          	float:left;
          }
          #rightPanel
          {
          	width:350px;
          	float:left;
          }
          #footer
          {
          	clear:both;
          }
    </style>
    <script type="text/javascript">
    function loadAllUnselected(){
        var unassignedTable = document.getElementById("unassignedTable");
		//!!!!!!!!!!!!!!
        var rowsUnsellected = unassignedTable.childNodes[0].childNodes;
        document.getElementById("unselected").value="";
        for( i=0;i<rowsUnsellected.length;++i){
            if(rowsUnsellected[i].tagName == "TR" && rowsUnsellected[i].getAttribute("id")!=""){
                document.getElementById("unselected").value = 
                document.getElementById("unselected").value + '||' + rowsUnsellected[i].getAttribute("id");            
            }
        }
        var assignedTable = document.getElementById("assignedTable");
		//!!!!!!!!!!!
        var rowsSelected = assignedTable.childNodes[0].childNodes;
        for(  i=0;i<rowsSelected.length;++i){
            if(rowsSelected[i].tagName == "TR" && rowsSelected[i].getAttribute("id")!=""){
                document.getElementById("unselected").value = 
                document.getElementById("unselected").value + "||" + rowsSelected[i].getAttribute("id");
            }
        }
    }
    //汇总所有已分配和未非配的数据
    function countAllIds(){
        var unassignedTable = document.getElementById("unassignedTable");
		//!!!!!!!!!!!!!!!!!!
        var rowsUnas =unassignedTable.childNodes[0].childNodes;
        document.getElementById("unassignedids").value="";
        for(var i = 0;i <rowsUnas.length;++i){
            if(rowsUnas[i].tagName == "TR" && rowsUnas[i].getAttribute("id")!=""){
                document.getElementById("unassignedids").value =
                document.getElementById("unassignedids").value + "||" +rowsUnas[i].getAttribute("id");
            }
        }
        
        var assignedTable = document.getElementById("assignedTable");
		
		//!!!!!!!
        var rowsas = assignedTable.childNodes[0].childNodes;
        document.getElementById("assignedids").value="";
        for(var i=0 ;i<rowsas.length;++i){
            if(rowsas[i].tagName == "TR" && rowsas[i].getAttribute("id")!="")
                document.getElementById("assignedids").value =
                document.getElementById("assignedids").value + "||" + rowsas[i].getAttribute("id");
        }
    }
    
    //将选中的行移至未分配表
    function moveToLeft(){
        var ids=document.getElementById("selected").value;
        var idArray = ids.split("||");
        for(i=0;i<idArray.length;++i){
            if(idArray[i]!=""){
                var moveObj = document.getElementById(idArray[i]);
                add(moveObj,"unassignedTable");
            }
        }
        countAllIds();
    }
    
     //将选中的行移至分配表
     function moveToRight(){
        var ids=document.getElementById("selected").value;
        var idArray = ids.split("||");
        for(i=0;i<idArray.length;++i){
            if(idArray[i]!=""){
                var moveObj = document.getElementById(idArray[i]);
                add(moveObj,"assignedTable");
            }
        }
		countAllIds();
     }
     
     //指定的表格中添加行
     function add(rowObj, tableObj){
        var table = document.getElementById(tableObj);
        var newRow = table.insertRow(table.rows.length);
        newRow.replaceNode(rowObj);
     }
     
     //删除已选择的行
     function removeRow(obj){
        var clickedRow = obj;
        while(clickedRow != "TR"){
            clickedRow = clickedRow.parentNode;
        }
        clickedRow.parentNode.removeChild(clickedRow);
     }
     
     //当鼠标点击时切换背景色与设置值
     function changeBackground(obj){
        if(obj.style.background == "silver"){
            obj.style.background = "#ffffff";
            document.getElementById("unselected").value = document.getElementById("unselected").value + "||" + obj.getAttribute("id");
            document.getElementById("selected").value = document.getElementById("selected").value.replace("||" + obj.getAttribute("id"),'');
        }
        else{
            if(document.getElementById("selected").value.indexOf(obj.getAttribute("id"))<0){
                document.getElementById("selected").value =
                document.getElementById("selected").value+ "||" +obj.getAttribute("id");
                document.getElementById("unselected").value =
                document.getElementById("unselected").value.replace("||" +obj.getAttribute("id"),'');
            }
            obj.style.background = "silver";
        }
     }
    </script>
</head>


<body  οnlοad="loadAllUnselected();countAllIds();">
    <div id="wrapper">
        <div>
            <p>双向选择列表</p>
        </div>
        <div id="leftPanel">
			<p>
                <table id="unassignedTable" width="350" border="1"  cellpadding="0" cellspacing="0">
                    <tr>
                        <th colspan="3">未分配</th>
                    </tr>
                    <tr>
                        <th>列1
                        </th>
                        <th>列2
                        </th>
                        <th>列3
                        </th>
                    </tr>
                    <tr id="a" οnclick="changeBackground(this)">
                        <td>A</td><td>A</td><td>A</td>
                    </tr>
                    <tr id="b" οnclick="changeBackground(this)">
                        <td>B</td><td>B</td><td>B</td>
                    </tr>
                </table>
			</P
        </div>
        
        <div id="buttonArea">
		    <p>
                <p>
                    <input type="button" οnclick="moveToRight();" value=">>" />
                </p>
                <p>
                    <input type="button" οnclick="moveToLeft();" value="<<" /> 
                </p>
			</p>
        </div>
        
        <div id="rightPanel">
		    <p>
				<table id="assignedTable" width="350" border="1" cellpadding="0" cellspacing="0">
					<tr>
						<th colspan="3" >已分配</th>
					</tr>
					<tr>
					<th>列1
					</th>
					<th>列2
					</th>
					<th>列3
					</th>
					</tr>
					
					<tr id="c" οnclick="changeBackground(this)">
						<td>C</td><td>C</td><td>C</td>
					</tr>
				</table>
			</p>
        </div>
    </div>
    <p>
       未选择:<input id="unselected" type="text" value="" />   
       已选择:<input id="selected" type="text" value="" /> 
    </p>
    <p>
        未分配:<input id="unassignedids" type="text" value="" />   
        已分配:<input id="assignedids" type="text" value="" />
    </p>
</body>
</html>

狮子和猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
角色 左右分配
u013568834的专栏
03-13 561
jquery角色左右选择框 - 站长素材 #one{width:200px; height:180px; float:left} #two{width:50px; height:180px; float:left} #three{width:200px; height:180px; float:left} .btn{width:50px; height:30px; margin-top:10p
bootstrap实现双向选择框
最初的节奏
05-16 2065
bootstrap实现双向选择框 精简博客内容，尽量已行业术语来分享。 努力做到对每一位认可自己的读者负责。 帮助别人的同时更是丰富自己的良机。 目录bootstrap实现双向选择框前端视图代码效果图 bootstrap.js bootstrap.css jquery.js 前端视图代码 <label class="control-label col-md-1 col-sm-3 col-xs-12" for="first-name">双选框：</label> <div c
【Linux】内核中双向链表
smartvxworks的博客
05-09 78
将新节点加到链表尾部，添加一个节点b为下图所示，再添加一个节点C，则在b后面再加一个c，组成双循环链表。使用 INIT_LIST_HEAD初始化双向列表头元素，使得prev和next都指向头自己。这里把a（只是替代）当作头结点，初始化时，使得prev和next都指向自己。该函数创建头节点，注意list要已分配好空间。
双向选择弹出框
iOS重新起航
05-05 463
文章来源 : http://www.cocoachina.com/ios/20141126/10320.html​ UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"标 题" message:@"这个是UIAlertController的默认样式" preferre
数据结构——双向链表（双向连接的图解、双向链表的创建、操作双向链表）
qq_52301431的博客
08-23 4065
举个例子: 假设一个文本编辑用链表来存储文本. 每一行用一个String对象存储在链表的一个节点中. 当编辑器用户向下移动光标时, 链表直接操作到下一个节点即可. 但是当用于将光标向上移动呢?- 我们可以轻松的到达下一个节点, 但是回到前一个节点是很难的. 但是, 在实际开发中, 经常会遇到需要回到上一个节点的情况。- 也就是链表相连的过程是单向的. 实现的原理是上一个链表中有一个指向下一个的引用.- 一个节点既有向前连接的引用, 也有一个向后连接的引用.- 既可以从头遍历到尾, 又可以从尾遍历到头。
jQuery实现双向选择列表框
05-26
本文将深入探讨如何使用jQuery实现双向选择列表框，这在需要同步两个下拉列表的选择时非常有用，例如在一对一映射或多选选项同步的情景。 首先，双向选择列表框的基本概念是，当在一个列表中做出选择时，相应的选项...
jQuery双向选择穿梭框代码
07-24
双向选择穿梭框通常包含两个列表：左侧的可供选择列表和右侧的已选择列表。用户可以选择左侧的项移到右侧，或者从右侧的已选择列表移除。这种设计允许用户方便地进行多选操作，并且能清晰地看到当前的选择状态。 ...
jQuery下拉列表框双向选择
11-11
而“jQuery下拉列表框双向选择”则涉及到一种交互设计，允许用户在一个下拉列表中选择项，并同时将这些选择同步到另一个相关的下拉列表中，实现数据的双向同步。 要实现这样的功能，我们需要理解以下几个关键知识点...
数据结构之双向列表实现
qq_26138699的博客
06-30 316
双向列表，这里无论删除还是增加都需要特别注意头节点与尾节点。package shujujiegou;/** * Created by lcc on 2017/6/30. */ public class BidirectionalList { public static void main(String[] args) { BidirectionalList list =
数据结构之链表详解(2)——双向链表
weixin_69283129的博客
08-29 9052
C语言版万字详解：数据结构之链表详解(2)——双向链表的结构和功能实现
bootstrap双向选择
07-20
bootstrap双向选择插件，开箱即用，打开index.html文件就可以看到demo
简单的双向链表实现
12-01
struct INode { int key;//键 int value;//值 INode * node_r = NULL;//下一个节点指针 INode * node_l = NULL;//上一个节点指针 }; class IList { public: INode insert_Last(int key, int value);//插入到最后 INode insert_Top(int key, int value);//插入到最前 INode insert_prev(INode * INode, int key, int value);//插入到节点前面 INode insert_next(INode * INode, int key, int value);//插入到节点后面 void clear();//清空链表 bool get(int key,int &value;,INode &r_iNode);//获取值 bool get_Last(int &key;,int &value;,INode &r_iNode);//获取最后一个 bool get_Top(int &key;, int &value;,INode &r_iNode);//获取第一个 IList(); ~IList(); private: INode * node_top = NULL;//最前面的指针 INode * node_last = NULL;//最后插入的节点 };
基于jquery和bootstrap的下拉框左右选择功能
weixin_34114823的博客
07-11 422
实现如图选择的功能，可以用基于bootstrap的样式，结合jquery事件： <div class="row"> <div class="col-xs-3"> <select name="from" id="select1" class="form-control" size="10"> ...
Android可双向滑动的范围选择器（双向滑动可选择范围的SeekBar）实现
热门推荐
tangxuesong的博客
02-01 1万+
一、概述 之前公司app里面有个功能是一个可以双向滑动的范围选择器，我在网上百度过一些实现方法，感觉各有利弊吧，但是都不太适合我们的需求。所以站在巨人的肩膀上，通过自定义View实现了一个可以适用于绝大多数情况的范围选择器来供大家使用。首先，看效果图： 我对该范围选择器的属性进行了一些封装，例如我们可以自由控制我们的范围选择器是否显示刻度、刻度的长度、我们选择器上每个值的单位、最大值最小值
Android 自定义双向滑动SeekBar
qq_33214392的博客
09-12 3890
Android 自定义双向滑动SeekBar ，一些需要价格区间选择的App可能需要用到 1. 自定义MySeekBar 继承 View，先给一张效果图。 2.原理：自定义attrs属性，从布局中获取SeekBar最小值、坐标点个数、2点间代表的数值。 3.由SeekBar最小值、坐标点个数、2点间代表的数值确定 每个坐标点的所代表的数值。 4.onMeasure()方
Android_自定义可定制步长的双向SeekBar
givemeacondom的专栏
07-10 3538
还记得几年前写过一个双向seekbar吗,不足的是不支持步长扩展,老的双向seekbar链接 这几天正好做需求,要扩展一个支持步长,一次只能滑动50个,松开,即刻回弹到距离它最近的单位坐标上,WFK.那么我们要开车了. 需求理一下 双向拖动 定义步长 回弹确定最终值 文字描述不能因为太近而遮盖 …..还有一堆扩展属性不说了 老规矩,效果图如下 直接看做出来的成品 接下里就手...
Kotlin-->范围选择进度条, 双向SeekBar
<angcyo>菜鸟视角
09-19 1885
首先了解下, 自定义View的三部曲.1:onMeasure方法此方法主要目的, 就是根据xml的 android:layout_width="wrap_content" android:layout_height="wrap_content"wrap_content match_parent 这2个属性, 来确定测量自身的大小. 当然, 这2个值, 只是parent告诉你,
nginx源码安装记事
Mr.CJ
11-10 5959
nginx也安装更新了几次了，在此闲啰嗦几句我不是什么linux
写一个jQuery 双向选择穿梭框 树状结构数据 选择文本穿梭不要复选框
最新发布
07-12
这个代码会创建一个双向选择穿梭框，左侧是可选项树状结构数据，右侧是已选项列表。通过点击树节点，可以将选中的节点从可选项移到已选项，或者从已选项移到可选项。没有复选框，选择是通过点击文本实现的。 希望对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值