手动排序（javascript）

最新推荐文章于 2022-05-26 16:56:52 发布
最新推荐文章于 2022-05-26 16:56:52 发布
阅读量154 收藏
点赞数
分类专栏： 网站相关 文章标签： javascript function button object input stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/great_domino/article/details/245837
版权

手工排序




---------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>start</title>
      <LINK rel="stylesheet" href="../../css/main.css" type="text/css">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
  <body MS_POSITIONING="GridLayout">
  <FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT>
  <BR>
  <table width="200" border="0" align="center">
   <tr>
    <td class="Title" align="center" nowrap>
     手工排序
    </td>
   </tr>
  </table>
  <BR>
  <form id="Form1" method="post" action="do.asp">
    <table align="center">
      <tr align=center>
        <td width=160><select size=10 name="list1" style="width:120">
          <option value=1>1111111</option>
          <option value=2>2222222</option>
          <option value=3>3333333</option>
          <option value=4>4444444</option>
          <option value=5>5555555</option>
          <option value=6>6666666</option>
          <option value=7>7777777</option>
        </select></td>
        <td><input type="button" value="增 加>>>" οnclick="add()">
            <br/>
            <br/>
            <input type="button" value="<<<删 除" οnclick="del()">
        </td>
        <td width=79><select name="seqItem" id="seqItem" size="10" style="width:120">
        </select></td>
        <td width=79><p align="center">
          <input type="button" value="移动到顶部" onClick="doTopItem()">
        </p>
        <p align="center">
          <input type="button" name="Submit" value="向上移动" onClick="doUpItem()">
        </p>
        <p align="center">
          <input type="button" name="Submit" value="向下移动" onClick="doDownItem()" >
        </p>
        <p align="center">
          <input type="button" name="Submit" value="移动到底部" onClick="doBottomItem()">
        </p></td>
      </tr>
    </table>
    <div align="center">
      <input type="button" value="测 试" onClick="goClick()">
      <input type="button" value="重 置" onClick="doRe()">
      <input type="submit" name="ok" value="提 交">
  </div>
  </form>
 <SCRIPT LANGUAGE="javascript">
 var seqSelect=document.forms[0].seqItem;
 var length=5;
 
 //go top
 function doTopItem(){
  var length=seqSelect.options.length; 
 var topV,topT;
 var tempV=new Array();
 var tempT=new Array();
 for(var i=0;i<length;i++){
  if(seqSelect.options[i].selected){
    if(i==0)
     return false;
   topV=seqSelect.options[0].value;
    topT=seqSelect.options[0].text;
    seqSelect.options[0].value=seqSelect.options[i].value;
    seqSelect.options[0].text=seqSelect.options[i].text;
   
    for(var j=1;j<length;j++){
     tempV[j]=seqSelect.options[j].value;
     tempT[j]=seqSelect.options[j].text;
     alert(tempV+"  ··· "+tempT);
     if(j==1){
     seqSelect.options[1].value=topV;
     seqSelect.options[1].text=topT;
     }
     else if(j>i){
        break;    
     }
        else{
     seqSelect.options[j].value=tempV[j-1];
     seqSelect.options[j].text=tempT[j-1];
     }
    }
   
    }
 }
 seqSelect.options[0].selected=true;
 }
 
 //go bottom
 function doBottomItem(){ 
  var length=seqSelect.options.length;
    var bottomV,bottomT;
 var tempV=new Array();
 var tempT=new Array();
 for(var i=0;i<length;i++){
  if(seqSelect.options[i].selected){
    if(i==(length-1))
     return false;
    bottomV=seqSelect.options[length-1].value;
    bottomT=seqSelect.options[length-1].text;
    seqSelect.options[length-1].value=seqSelect.options[i].value;
    seqSelect.options[length-1].text=seqSelect.options[i].text;
   
     for(var j=length-2;j>=0;j--){
    tempV[j]=seqSelect.options[j].value;
     tempT[j]=seqSelect.options[j].text;
     alert(tempV+"  ··· "+tempT);
     if(j==(length-2)){
     seqSelect.options[length-2].value=bottomV;
     seqSelect.options[length-2].text=bottomT;
     }
     else if(j<i){
        break;    
     }
        else{
     seqSelect.options[j].value=tempV[j+1];
     seqSelect.options[j].text=tempT[j+1];
     }
    }
   
    }
 }
 seqSelect.options[length-1].selected=true;
 }
 
 //go up 1
 function doUpItem(){  
  var length=seqSelect.options.length;
 var tempV,tempT;
 for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
    if(i==0)
         return false;
   tempV=seqSelect.options[i-1].value;
   tempT=seqSelect.options[i-1].text;
   seqSelect.options[i-1].value=seqSelect.options[i].value; 
   seqSelect.options[i-1].text=seqSelect.options[i].text;
   seqSelect.options[i].value=tempV; 
   seqSelect.options[i].text=tempT;
   seqSelect.options[i-1].selected=true;
   break;    
   }
 }
 }
 
 //go down 1
 function doDownItem(){
  var length=seqSelect.options.length;  
 var tempV,tempT;
 for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
   if(i==(length-1))
        return false;
   tempV=seqSelect.options[i+1].value;
   tempT=seqSelect.options[i+1].text;
   seqSelect.options[i+1].value=seqSelect.options[i].value; 
   seqSelect.options[i+1].text=seqSelect.options[i].text;
   seqSelect.options[i].value=tempV; 
   seqSelect.options[i].text=tempT;
   seqSelect.options[i+1].selected=true;
   break;    
   }
 }
 }
 
 function doRe(){
 document.forms[0].action="";
 document.forms[0].submit();
 }
 
 function setCursor(objStyle,cursor)
    {
      objStyle.cursor = cursor;
    }
<!--
 function goClick()
 {
 
   var res ="";
 for (var i =0;i<seqSelect.options.length;i++)
 {
  if(seqSelect.options[i].selected)
  {
   res += seqSelect.options[i].index +",";
  }
 }
 
 alert(res);
 }
//-->
function add_singer(object,value,text)//添加数据
{
if(singer_exist(object,value)==false)
{
object.options.add(new Option(text,value,true,true));
return true;
}
return false;
}
function remove_singer(object,index)//删除数据
{
if(index<0)return false;
object.options.remove(index)
}
function singer_exist(object,value)//检查是否存在
{
for(var i=0;i<object.options.length; i++)
{
if(object.options[i].value==value)
return true;
}
return false;
}
function add()
{
var obj1=document.all.list1;
var index=obj1.selectedIndex;
if (index<0) return false;
value=obj1.options[index].value;
text=obj1.options[index].text;
var obj2=document.all.seqItem;
add_singer(obj2,value,text)
remove_singer(obj1,index)
}
function del()
{
var obj2=document.all.seqItem;
var index=obj2.selectedIndex;
if (index<0) return false;
value=obj2.options[index].value;
text=obj2.options[index].text;
var obj1=document.all.list1;
add_singer(obj1,value,text)
remove_singer(obj2,index)
}
</script>
  </body>
</html>
 
<script language=javascript> var seqSelect=document.forms[0].seqItem; var length=5; //go top function doTopItem(){ var length=seqSelect.options.length; var topV,topT; var tempV=new Array(); var tempT=new Array(); for(var i=0;i i){ break; } else{ seqSelect.options[j].value=tempV[j-1]; seqSelect.options[j].text=tempT[j-1]; } } } } seqSelect.options[0].selected=true; } //go bottom function doBottomItem(){ var length=seqSelect.options.length; var bottomV,bottomT; var tempV=new Array(); var tempT=new Array(); for(var i=0;i =0;j--){ tempV[j]=seqSelect.options[j].value; tempT[j]=seqSelect.options[j].text; alert(tempV+" ··· "+tempT); if(j==(length-2)){ seqSelect.options[length-2].value=bottomV; seqSelect.options[length-2].text=bottomT; } else if(j function add_singer(object,value,text)//添加数据 { if(singer_exist(object,value)==false) { object.options.add(new Option(text,value,true,true)); return true; } return false; } function remove_singer(object,index)//删除数据 { if(index<0)return false; object.options.remove(index) } function singer_exist(object,value)//检查是否存在 { for(var i=0;i
great_domino
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
manusort:支持手动排序
06-02
曼努斯特Manusort 是 JavaScript 的权威版本，可帮助您以替代格式手动排序。应用实例由于解释会很长，我在下面具体列出了在什么情况下可以使用具有这种复杂逻辑的 Manusort。订购你喜欢的东西任务优先级设置需要排名...
JS中数组的sort()排序
NinthSea的博客
06-06 4284
1.sort() 方法的带参和无参调用： sort()方法对数组元素进行排序，参数可选。返回一个数组的引用，不会创建新的数组对象而是将原数组改变成排序后的数组。 无参调用： 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串以便进行比较。如果数组元素是数字的话会得到错的结果，这时需要使用有参
js的五种排序方法
weixin_46224014的博客
11-09 4万+
1.冒泡排序 说明: 比较所有相邻元素,如果第一个比第二个大，则交换它们 一轮下来保证可以找到一个数是最大的 执行n-1轮，就可以完成排序 图示： ** 代码： //定义一个原生的bubbleSort方法 Array.prototype.bubbleSort = function () { for(let i = 0; i < this.length - 1; i += 1) { //通过 this.length 次把第一位放到最后,完成排序 //-i是因为
「算法学习」：js手写快速排序、冒泡排序、选择排序
老古懂的博客
05-18 423
快速排序 快排思想： 第一步：选择第一个数字分离出来为基数（数组第一个或者中间数字） 第二步：然后通过首尾指针遍历将序列中大于基数的放在基数右边，小于基数的放在基数的左边 第三步：然后对基数的左边和右边两个序列重复第二步和第三步，排序完成 //传入两个指针初始位置是为了更好的递归 function sort(arr, begin, end) { //双指针未交叉时此轮遍历继续，直至交叉后遍历完成此时基数左边是小于基数数组，右边为大于选中基数数组 if (begin < end) { //
js几种常见排序的实现
大康子
04-21 2万+
下面主要是对冒泡排序、选择排序、快速排序、插入排序的js实现的回顾。1. 冒泡排序 定义： 比较相邻的前后二个数据，如果前面数据大于后面的数据，就将二个 数据交换。 这样对数组的第0个数据到N-1个数据进行一次遍历后，最大的一个数据就“沉”到数组第N-1个位置。 N=N-1，如果N不为0就重复前面二步，否则排序
用js实现几种排序
qq_45791799的博客
05-26 462
一、快速排序 <script> // 快速排序 // 随便找一个数作为基准，运用递归，大的数放在right数组里面，小的数放在left数组里面 function rec(arr) { var left = [] var right = [] var mid = arr[0] if (arr.length == 0 || arr.length == 1) { return arr
算法实践(JavaScript & Java)，排序，查找、树、两指针、动态规划等.zip
最新发布
01-13
Java是一种高性能、跨平台的面向...自动内存管理（垃圾回收）： Java具有自动内存管理机制，通过垃圾回收器自动回收不再使用的对象，使得开发者不需要手动管理内存，减轻了程序员的负担，同时也减少了内存泄漏的风险。
javascript入门笔记
05-15
Javascript Basic 1、Javascript 概述(了解) Javascript，简称为 JS，是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境： 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS...
workspacesort-for-VSCode:VSCode扩展，用于对工作区文件夹进行排序
05-08
工作区排序对工作区文件夹进行排序的方式与对文件和内部文件夹进行排序的方式相同，而不是按时间顺序对其进行排序。 有两种方法可以对工作空间文件夹进行排序： 右键单击资源管理器中的文件夹，然后单击“ Sort ...
程序天下:JavaScript实例自学手册
07-08
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
Javascript中的数组对象排序
极客神殿
05-26 4095
一、普通数组排序　　 js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如： var arr = [&quot;a&quot;, &quot;b&quot;, &quot;A&quot;, &quot;B&quot;]; arr.sort(); console.log(arr);//[&quot;A&quot
简单排序JS版
qq_33297737的博客
09-23 137
简单排序JS版 冒泡排序、插入排序、选择排序、归并排序(递归和非递归版)、快速排序 (...后续)
如何使用JS的排序函数sort()
gabby____的博客
04-15 817
https://blog.csdn.net/fenglin247/article/details/86895913
js排序——sort()排序用法
热门推荐
前端小狮的博客
04-20 19万+
sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。 语法：array.sort(fun)；参数fun可选。规定排序顺序。必须是函数。 注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。 如果想按照其他规则进行排序，就需要提供比较函数，该函数要比较两个值，然后返回...
js表格拖动排序
paolei的笔记
03-07 3856
原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！jquery.tablednd_0_5.js  非js库的js表格拖动代码  表格排序 <!-- function $(Id){return document.getElementById(Id);} var beginMoving = false; var tbid=new Arra
js排序的2种方法,好用
weixin_30748995的博客
06-12 74
1、通过sort()方法，简单暴力我喜欢的。 var arr = [21,100,-6,99,1] function sortNum(a,b){ return a-b; } arr.sort(sortNum);console.log(arr); 2、普通冒泡排序方法，比较原始好懂。 var arr = [210,100,6,99,1,12]; va...
js拖动排序核心代码
Fish的博客
05-09 638
function getLis_By_UlId(id) { var oUl = document.getElementById(id); if (!oUl) //if null return null; var aLi = oUl.getElementsByTagName("li"); return aLi; } function setStyle_...
js拖动排序
不积跬步，无以至千里
11-30 859
js拖动排序 <!DOCTYPE html> <html lang="en"> <head> <title>js拖动给排序</title> <meta charset="utf-8"> <title>拖动列表</title> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></scri
JS sort()方法如何正确排序数字
欢迎访问我的主页：https://www.bookbook.cc
05-26 1万+
JS sort()方法如何正确排序数字
el-table 手动对选中的行排序
06-06
如果你想手动对 el-table 中选中的行进行排序，可以按照以下步骤操作： 1. 获取当前选中的行数据和排序方式。 2. 对选中的行数据进行排序。可以使用 JavaScript 中的 sort() 方法或 Lodash 库中的 orderBy() 方法等。 3. 根据排序方式，对 el-table 中的数据进行更新。可以使用 el-table 组件中的 $refs 属性获取到 el-table 实例，然后调用实例的 setTableData() 方法来更新数据。 下面是一个简单的示例代码，仅供参考： ```html <el-table ref="table" :data="tableData" :row-key="row => row.id" @row-click="handleRowClick"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { id: 1, name: 'Alice', age: 20 }, { id: 2, name: 'Bob', age: 25 }, { id: 3, name: 'Charlie', age: 30 }, { id: 4, name: 'David', age: 35 } ], selectedRows: [], sortKey: null, sortOrder: null } }, methods: { handleRowClick(row) { this.$refs.table.toggleRowSelection(row) this.selectedRows = this.$refs.table.selection }, handleSort() { if (this.sortKey && this.sortOrder) { this.selectedRows.sort((a, b) => { const sortVal = this.sortOrder === 'asc' ? 1 : -1 if (a[this.sortKey] < b[this.sortKey]) { return -sortVal } else if (a[this.sortKey] > b[this.sortKey]) { return sortVal } else { return 0 } }) const newData = this.tableData.map(row => { if (this.selectedRows.indexOf(row) > -1) { return this.selectedRows.shift() } else { return row } }) this.$refs.table.setTableData(newData) } } } } ``` 在上述示例代码中，我们定义了一个 el-table 组件，并且监听了它的 row-click 事件，以便获取选中的行数据。然后，我们定义了一个 handleSort() 方法，该方法会根据 sortKey 和 sortOrder 对选中的行数据进行排序，并更新 el-table 中的数据。注意，我们需要使用 $refs 属性获取到 el-table 实例，以便调用 setTableData() 方法来更新数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值