JSDom——列表选中移动篇

该博客转载自https://www.cnblogs.com/H_Razor/archive/2011/03/21/1990673.html ,原内容可能与xhtml和javascript相关,涉及前端开发领域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这个列表选中移动呢,灵感来自淘宝,在淘宝注册店铺的过程中,会涉及到选择分类,而其选择方式呢,就是如下效果:
2011032120372420.png
以下为具体的实现方式:
①  
HTML源码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
6 <title>无标题文档</title>
7 </head>
8 <body>
9 <span>
10 <select id="left" multiple="multiple" style="width: 80px; height:120px; background:#CCC;">
11 <option>1</option>
12 <option>2</option>
13 <option>3</option>
14 <option>4</option>
15 <option>5</option>
16 <option>6</option>
17 </select>
18 <input type="button" value="→" id="forR"/>
19 <input type="button" value="More→" id="MforR"/>
20 <input type="button" value="←"/ id="forL">
21 <input type="button" value="More←" id="MforL"/>
22 <select id="right" multiple="multiple" style="width:80px; height:120px; background:#CCC;">
23
24 </select>
25 </span>
26 </body>
27 <script type="text/javascript" src="move.js"></script>
28 </html>
网页中有六个元素:
4个按钮,两个select框
②  JavaScript源码:
 
1 /*获得四个按钮的节点对象*/
2 var forR = document.getElementById("forR");
3 var MforR = document.getElementById("MforR");
4 var forL = document.getElementById("forL");
5 var MforL = document.getElementById("MforL");
6 /*单项左向右移动*/
7 forR.onclick = function (){
8 //获得两个select框元素节点
9 var left = document.getElementById("left");
10 var right = document.getElementById("right");
11 //获得所有选项元素
12 var loptions = left.options;
13 //遍历所有选项对象
14 for(var i=0;i<loptions.length;i++){
15 var op = loptions[i];
16 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
17 if(op.selected){
18 right.appendChild(op);
19 break;
20 }
21 }
22 }
23 /*多项左向右移动*/
24 MforR.onclick = function(){
25 //获得两个select框元素节点
26 var left = document.getElementById("left");
27 var right = document.getElementById("right");
28 //获得所有选项元素
29 var loptions = left.options;
30 //遍历所有选项对象
31 for(var i=0;i<loptions.length;i++){
32 var op = loptions[i];
33 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
34 if(op.selected){
35 right.appendChild(op);
36 i--;
37 }
38 }
39 }
40 /*单项右往左移动*/
41 forL.onclick = function (){
42 //获得两个select框元素节点
43 var left = document.getElementById("left");
44 var right = document.getElementById("right");
45 //获得所有选项元素
46 var roptions = right.options;
47 //遍历所有选项对象
48 for(var i=0;i<roptions.length;i++){
49 var op = roptions[i];
50 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
51 if(op.selected){
52 left.appendChild(op);
53 break;
54 }
55 }
56 }
57 /*多向右往左移动*/
58 MforL.onclick = function(){
59 //获得两个select框元素节点
60 var left = document.getElementById("left");
61 var right = document.getElementById("right");
62 //获得所有选项元素
63 var roptions = right.options;
64 //遍历所有选项对象
65 for(var i=0;i<roptions.length;i++){
66 var op = roptions[i];
67 //如果选项被选中则将该元素添加到右边的选择框中、也就是移动
68 if(op.selected){
69 left.appendChild(op);
70 i--;
71 }
72 }
73 }
注意:
  1.在以上的脚本代码中我们可以看到当单个元素移动时利用break结束了循环,这是为了保证每次即使多选也只移动一个元素,循环也就只执行一次
  2.在多个选中项的移动中,当检测到选中元素并移走后select中元素减少,而检测元素的下标就会从移走的后的下标直接往后移动检测,
  如果不进行减操作会导致每次都遗留一个元素,这并不符合我们的理想效果
  
  从反向的移动中我们可以看到选项不会像以前正常排序,希望如果有想法的老牛们给些提示,希望大家在本文中可以学到写东西,共同交流。


本文版权所有,转载请注明出处!

转载于:https://www.cnblogs.com/H_Razor/archive/2011/03/21/1990673.html

### 实现鼠标指针悬停或点击选中表格首列 为了实现当鼠标指针悬停或点击时选中表格的第一列,在HTML页面上可以通过组合使用JavaScript和CSS来完成这一目标。具体来说,利用`addEventListener()`方法监听鼠标的`mouseover`以及`click`事件,并针对这些事件动态调整DOM元素的类名或是直接操作其样式。 对于表格中的每一行,可以为其绑定相应的事件处理函数。一旦检测到用户的交互行为(即鼠标移动至某一行之上或者是该行被单击),就执行特定的操作——例如更改指定单元格(这里是每行的第一个单元格)的背景颜色或其他视觉特性以达到“选中”的效果[^1]。 下面是一个简单的例子: #### HTML结构 ```html <table id="myTable"> <tr> <td>Row 1 Col 1</td><td>Row 1 Col 2</td> </tr> <tr> <td>Row 2 Col 1</td><td>Row 2 Col 2</td> </tr> <!-- 更多行 --> </table> ``` #### JavaScript代码片段 ```javascript document.addEventListener('DOMContentLoaded', (event) => { const tableRows = document.querySelectorAll('#myTable tr'); tableRows.forEach(row => { row.addEventListener('mouseover', () => highlightFirstCell(row, true)); row.addEventListener('mouseout', () => highlightFirstCell(row, false)); row.addEventListener('click', () => selectFirstColumn()); function highlightFirstCell(trElement, addClass){ let firstTd = trElement.querySelector('td:first-child'); if(addClass){ firstTd.classList.add('selected-cell-hover'); }else{ firstTd.classList.remove('selected-cell-hover'); } } function selectFirstColumn(){ Array.from(tableRows).forEach(r => r.querySelector('td:first-child').classList.toggle('selected-cell-click')); } }); }); ``` #### CSS样式定义 ```css .selected-cell-hover { background-color: yellow; } .selected-cell-click { background-color: lightblue; } ``` 上述脚本实现了如下功能: - 鼠标经过任意一行时,会短暂地改变该行第一个单元格(`<td>`标签)的颜色; - 用户点击任何地方,则整个表内所有行对应的首个单元格都会切换一种不同的选定状态表示形式; 这种设计不仅提供了良好的用户体验,还能够清晰地区分当前关注的重点区域[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值