<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
调整上下左右顺序实例
</title>
<link rel="stylesheet" href="style/style_<%=strCssType%>.css" type="text/css">
<script language="JavaScript">
function chooseItems(source, target) {
var choiceOptions = source.options;
var selectedOptions = target.options;
for (i = 0; i < (choiceOptions.length); i++) {
var temp = choiceOptions.item(i);
if (temp.selected == true) {
var oOption = document.createElement("OPTION");
selectedOptions[selectedOptions.length] = new Option(temp.text, temp.value);
}
}
for (j = (choiceOptions.length - 1); j >= 0; j--) {
var temp = choiceOptions.item(j);
if (temp.selected == true) {
choiceOptions[j] = null;
}
}
}
function adjustUp() {
var itemOptions = form1.selectcolumns.options;
var selectedOption;
var count = 0;
var index;
for (i = 0; i < itemOptions.length; i++) {
var temp = itemOptions.item(i);
if (temp.selected == true) {
count++;
if (count > 1) {
alert("只能选择一个列调整顺序！");
return;
} else if (count == 1) {
index = i;
}
}
}
if (count == 0) {
alert("请选择要调整顺序的列！");
return;
}
if (index == 0) return;
selectedOption = itemOptions[index];
var lastOption = itemOptions[index - 1];
var temp = new Option(selectedOption.text, selectedOption.value);
selectedOption.text = lastOption.text;
selectedOption.value = lastOption.value;
selectedOption.selected = false;
lastOption.text = temp.text;
lastOption.value = temp.value;
lastOption.selected = true;
}
function adjustDown() {
var itemOptions = form1.selectcolumns.options;
var selectedOption;
var count = 0;
var index;
for (i = 0; i < itemOptions.length; i++) {
var temp = itemOptions[i];
if (temp.selected == true) {
count++;
if (count > 1) {
alert("只能选择一个列调整顺序！");
return;
} else if (count == 1) {
index = i;
}
}
}
if (count == 0) {
alert("请选择要调整顺序的列！");
return;
}
if (index == itemOptions.length - 1) return;
selectedOption = itemOptions[index];
var nextOption = itemOptions[index + 1];
var temp = new Option(selectedOption.text, selectedOption.value);
selectedOption.text = nextOption.text;
selectedOption.value = nextOption.value;
selectedOption.selected = false;
nextOption.text = temp.text;
nextOption.value = temp.value;
nextOption.selected = true;
}
function checkForm(form1) {
var columnsOptions = form1.selectcolumns.options;
if (columnsOptions.length == 0) {
alert("请选择要显示的列!");
return false;
}
for (i = 0; i < columnsOptions.length; i++) {
columnsOptions[i].selected = true;
}
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="basylistForward.do" onSubmit="return checkForm(form1)">
<center>
<table height="5" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
<table width="700">
<tr>
<td width="40%" align="center">
<select name="choices" size="25" style="width: 100%" multiple="multiple">
<option value="userName">
用户名
</option>
<option value="password">
密码
</option>
<option value="Email">
邮箱
</option>
<option value="address">
住址
</option>
<option value="telephone">
联系方式
</option>
<OPTION value="birthday">
生日
</OPTION>
<OPTION value="firstName">
名
</OPTION>
<OPTION value="lastName">
姓
</OPTION>
<option value="age">
年龄
</option>
<option value="company">
工作单位
</option>
<option value="workTime">
参加工作日期
</option>
</select>
</td>
<td width="10%" align="center">
<input name="but_r" type="button" class="buttonr" onClick="chooseItems(form1.choices, form1.selectcolumns)">
<table height="5" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
<input name="but_l" type="button" class="buttonl" onClick="chooseItems(form1.selectcolumns, form1.choices)">
</td>
<td width="40%" align="center">
<select name="selectcolumns" size="25" style="width: 100%" multiple="multiple">
<option value="BasySex_n">
性别
</option>
<option value="BasyAge">
年龄
</option>
<option value="BasyRdate">
入院日期
</option>
<option value="BasyCDate">
出院日期
</option>
<option value="BasyCykbN">
出院科别
</option>
<option value="BasyCyMzd">
主要诊断名称
</option>
<option value="BasyCyMcyqk_n">
出院情况
</option>
<option value="BasyZyfySum">
住院费用
</option>
<option value="BasyJzh">
备用号
</option>
</select>
</td>
<td width="10%" align="center">
<input name="but_u" type="button" class="buttonu" onClick="adjustUp()">
<table height="5" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
<input name="but_d" type="button" class="buttond" onClick="adjustDown()">
</td>
</tr>
<tr>
<TD align="center">
</TD>
<TD align="center">
</TD>
<TD align="center">
<INPUT type="submit" class="button" value="显示(V)" accesskey="v">
<a href="javascript:history.go(-1)">
<font color="red">
返回
</font>
</a>
</TD>
<TD align="center">
</TD>
</tr>
</table>
</center>
</form>
</body>
</html>
分享到：
相关推荐
【标题】"JS动态可控制左右滚动的图片代码"涉及的知识点主要集中在JavaScript语言和网页动态效果的实现上。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它主要用于增加网页的交互性和动态功能。在这个场景...
标题中的“JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动”是一个常见的前端交互功能，常用于表单或者过滤选择场景。这个功能涉及到JavaScript的基础知识，DOM操作，事件处理以及可能的AJAX技术。下面...
此外，由于标签中提到了HTML，我们可以将`Bigdecimal.js`与HTML结合，通过JavaScript控制DOM元素来动态更新页面上的计算结果。例如，计算完成后，我们可以将结果插入到HTML的某个元素中： ```javascript document....
如按位与（&）、按位或（|）、按位异或（^）、左移（）、右移（>>）和无符号右移（>>>）等。 ### 控制结构 JavaScript中的控制结构主要包括条件语句（如if...else）和循环语句（如for、while）。这些结构用于根据...
原生JS轮播图是一种不依赖于任何第三方JavaScript库（如jQuery、Zepto等）的图片轮播方法，主要通过原生JavaScript来控制DOM元素，实现图片的自动轮播和手动切换功能。轮播图广泛应用于网页设计中，用以增强用户交互...
3. **算术运算符**：JavaScript还提供了其他高级运算符，如求幂（**），左移（），右移（>>），无符号右移（>>>）等。 ```javascript console.log(2 ** 3); // 输出 8 console.log(10 ); // 输出 20 ``` 4. **...
8. **事件处理**：响应用户的键盘输入，如左移、右移、旋转和加速下落。这些事件通常绑定到`keydown`和`keyup`事件上。 9. **速度控制**：游戏速度随时间或得分增加而加快，可以通过调整定时器的间隔来实现。 在...
JavaScript监听键盘事件，捕获用户的输入，如左移、右移、旋转和下落操作。这些操作对应的函数会被调用，更新游戏状态。同时，也需要处理用户暂停、重新开始等请求，通过改变游戏状态和重置游戏板来响应。 4. HTML...
3. **jQuery脚本**：定义了`imgLeftMove()`和`imgRightMove()`两个函数，分别实现轮播图的左移和右移效果。 4. **事件绑定**：通过`click`事件绑定，当用户点击“<”或“>”按钮时触发对应的移动效果。 #### 七、...
虽然JavaScript主要用于高级编程，但仍有位运算符，如按位与`&`、按位或`|`、按位异或`^`、左移`、右移`>>`和无符号右移`>>>`，这些在处理二进制数据时很有用。 三、自增自减运算符 `++` 和 `--` 是自增和自减...
- 位运算符如`&`（按位与）、`|`（按位或）、`^`（按位异或），以及移位运算符`>>`（无符号右移）、`（左移）、`>>>`（带符号右移）。 #### 二、控制结构 **控制流语句**用于决定代码执行的顺序，主要包括条件...
- `anim`函数用于控制图片的左右移动，参数`xp`表示起始位置，`xk`表示终点位置，`sme`表示移动方向（1为右移，-1为左移）。 - `moveLR`函数用于初始化图片位置，并调用`anim`函数进行实际的移动操作。该函数接收三...
按位操作符如&（按位与），|（按位或），^（按位异或），（左移）和>>>（无符号右移）常用于处理二进制数据。 JavaScript提供了多种控制流程语句，如`if...else`、`switch...case`、`for`、`while`等。`typeof`...
我们需要使用 JavaScript 来将个人随机的关卡的所有元素在页面显示出来。我们可以使用一个全局数组变量来存储关卡的元素，下标值为关卡的元素。 例如，我们可以使用以下代码来实现： ``` var elements = []; ...
在JavaScript编程中，控制网页元素动态行为是一种常见的需求，特别是在创建交互式网页应用时。本文将详细介绍如何利用键盘码来实现HTML中的div元素移动，以此为基础，你可以构建类似贪吃蛇游戏的基础框架。 首先，...
除了基本的游戏玩法外，作业还要求增加“左移”、“右移”、“旋转”和“加速下落”等控制按钮，以及提供两种不同的游戏板尺寸供用户选择。 - 六博棋游戏要求特别考虑老年人的游戏体验，因此在设计时需要考虑简化...
在网页设计和开发中，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。"jQuery左右列表按钮控制穿梭框"是网页交互设计中的一种常见功能，常用于数据选择和转移，例如在表单...
- **位运算符**：用于操作数字的二进制位，如按位与(`&`)、按位或(`|`)、按位异或(`^`)、左移(`)、右移(`>>`)、无符号右移(`>>>`)。 - **赋值运算符**：除了基本的赋值(`=`)外，还有复合赋值运算符，如加等(`+=`)、...
以上是基于提供的文件内容整理的关键知识点概述，这些内容涵盖了JavaScript的基础概念、对象、操作符、语句等方面的核心知识。对于初学者来说，掌握这些知识点将为后续深入学习JavaScript打下坚实的基础。
- **位运算符**：包括左移`、右移`>>`、无符号右移`>>>`、按位与`&`、按位或`|`、按位异或`^`和按位非`~`。 - **赋值运算符**：除了基本的赋值运算符`=`之外，还有复合赋值运算符如`+=`, `-=`, `*=`, `/=`等。 ####...