测试工具：IE FireFox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
center
{
font-size:12px;
color:red;
font-weight:bold;
}
select
{
font-size:12px;
color:green;
}
</style>
<BODY>
<span id='feedback'></span>
<form method="post" name="myform">
<table border="0" width="400">
<tr>
<td><CENTER>可选择排序方式</CENTER></td>
<td> </td>
<td><CENTER>已选择排序方式</CENTER></td>
</tr>
<tr>
<td width="40%">
<select multiple name="left" id="left" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<option value="20">测试数据一</option>
<option value="30">测试数据二</option>
<option value="40">测试数据三</option>
<option value="50">测试数据四</option>
<option value="60">测试数据五</option>
<option value="70">测试数据六</option>
<option value="80">测试数据七</option>
<option value="90">测试数据八</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
<input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%">
<select multiple name="right" id="right" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">
<INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">
<INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">
<INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">
</CENTER></td>
</tr>
</table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
//上移
function moveUp(obj)
{
for(var i=1; i < obj.length; i++)
{//最上面的一个不需要移动，所以直接从i=1开始
if(obj.options[i].selected)
{
if(!obj.options.item(i-1).selected)
{
var selText = obj.options[i].text;
var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i-1].text;
obj.options[i].value = obj.options[i-1].value;
obj.options[i].selected = false;
obj.options[i-1].text = selText;
obj.options[i-1].value = selValue;
obj.options[i-1].selected=true;
}
}
}
}
//下移
function moveDown(obj)
{
for(var i = obj.length -2 ; i >= 0; i--)
{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
if(obj.options[i].selected)
{
if(!obj.options[i+1].selected)
{
var selText = obj.options[i].text;
var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i+1].text;
obj.options[i].value = obj.options[i+1].value;
obj.options[i].selected = false;
obj.options[i+1].text = selText;
obj.options[i+1].value = selValue;
obj.options[i+1].selected=true;
}
}
}
}
//移动
function moveOption(obj1, obj2)
{
for(var i = obj1.options.length - 1 ; i >= 0 ; i--)
{
if(obj1.options[i].selected)
{
var opt = new Option(obj1.options[i].text,obj1.options[i].value);
opt.selected = true;
obj2.options.add(opt);
obj1.remove(i);
}
}
}
//置顶
function moveTop(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
var index = 0 ;
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt, index++);
}
}
//置底
function moveBottom(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt);
}
}
//-->
</SCRIPT>
相关推荐
本篇文章将详细探讨如何使用JavaScript实现一个功能完备的表格，包括置顶、置底、上移、下移、添加和删除行的操作。 首先，我们需要创建一个基本的HTML结构，包含一个`<table>`元素，以及用于控制表格操作的按钮。...
《zTree右击操作详解——实现目录节点的上移、下移、置顶与置底功能》 在IT行业中，zTree是一款广泛使用的基于JavaScript的树状视图组件，它以其丰富的功能和良好的性能深受开发者喜爱。在日常的网页开发中，我们...
本话题主要关注如何在EasyUI的datagrid中实现行的动态操作，包括上移、下移、置顶、置底以及通过键盘事件进行交互，并且涉及数据排序和后台绑定。 首先，EasyUI的datagrid允许开发者以直观的方式展示和管理数据。在...
本文将详细介绍如何使用JavaScript实现表格行的上下移动、置顶和置底功能，并支持Ctrl多选、选中行样式改变以及行号显示等实用特性。 首先，我们需要创建一个HTML表格元素，包含若干行（tr）和单元格（td）。例如：...
在IT行业中，尤其是在Web开发领域，"后台上移下移，编辑，删除效果"涉及到的是对数据列表的操作，这是常见的用户界面（UI）交互功能。这些功能通常在管理界面或者数据展示页面出现，允许管理员或者用户对数据进行...
本文将深入探讨如何利用JavaScript实现表格行的上移和下移功能。 首先，我们需要获取表格元素。在HTML中，表格由`<table>`标签定义，行由`<tr>`标签表示。我们可以使用DOM方法如`document.getElementById`或`...
在Web开发中，经常需要对元素进行排序，比如在后台管理系统中对标签或列表项进行上移、下移以及置顶的操作。本文将详细解释如何使用jQuery实现这些功能，并提供相应的代码示例。 首先，要实现标签上移、下移、置顶...
### JSP 页面数据的上移下移实现方法 在网页应用开发中，有时我们需要实现列表项的上下移动功能，例如调整导航菜单、列表排序等。本文将详细介绍如何使用 JavaServer Pages (JSP) 实现这一功能，并通过示例代码进行...
对于Web应用程序，由于页面刷新会导致状态丢失，你需要在客户端使用JavaScript或者在服务器端使用ViewState来保存和恢复状态，以确保上移和下移操作的正确性。 4. 无刷新操作： 要实现无刷新操作，通常需要使用...
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
总结起来，这个项目展示了如何结合CSS和JavaScript来创建一个交互式的呼吸灯效果，并能根据需求将其置顶或置底。通过调整CSS的动画关键帧和JavaScript对DOM的操作，我们可以实现各种定制化的功能，为用户提供更加...
综上所述，"上移下移及表格复选框获取"这个功能涵盖了Web开发中的表格布局、用户交互、事件处理、数据操作等多个核心知识点，需要开发者具备扎实的HTML、CSS和JavaScript基础，同时也需要了解现代Web开发的最佳实践...
### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中，有时我们需要对浏览器原生的`<select>`元素进行定制化处理，比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...
本文主要介绍了使用jQuery实现表格中行上移、下移以及置顶的方法，这涉及到对网页元素特别是表格单元进行DOM操作的技巧。在当前的Web开发过程中，对页面元素的操作变得十分重要，尤其是在动态的交互式网页设计中。...
前言 我们交换数组可以实现元素上下移动了，这个效果我们在表格或以前排序算法中都会用到，下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候，要实现一个数组记录上下移动的示例... // 上移 $sc
总的来说，通过这个简单的实例，我们不仅学习了如何使用JavaScript实现数组元素的上移和下移操作，更通过这个过程加深了对JavaScript数组操作方法的认识，并且可以将这种认识应用到解决更复杂的问题上。在前端开发...
本篇文章主要介绍了如何使用jQuery来实现网页表格中数据行的动态上移、下移以及置顶操作。这些操作能够帮助我们在前端直接通过用户交互完成数据的顺序调整，同时配合简单的动画效果，使操作过程更加生动有趣。该方法...
在前端开发中，处理数组元素的上移和下移操作是常见的需求，尤其是在列表项顺序调整、排序等功能中。JavaScript作为一种强大的脚本语言，提供了多种方法来操作数组，包括添加、删除和修改数组元素。在实现数组元素的...
【jQuery实现的网站漂浮置顶与置底特效详解】 jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。在本项目中，"基于jQuery实现的网站漂浮置顶和置底特效源码...