急等一个图标切换的问题,请高手指教啊!!!!

echo_php echo_php 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
我有一个表格实现列的排序,当点这个列的时候数据根据该列进行升序和降序的排列,这个我从网上找了个资料已经实现了,但是我想加个图标,就是当数据是升的时候图标箭头向上,降序图标箭头向下,怎么加在程序中,代码如下,复制就可以运行:
<html>
<head content="text/html; charset=gb2312" >
<script type="text/javascript">
var indexCol;
//比较函数,用于Array.sort()排序时比较用。
//本函数比较数组元素array1[indexCol]和元素array2[indexCol]Unicode值的大小
function arrayCompare(array1,array2){
//alert(array1.length+"--"+array1[indexCol]);
if (array1[indexCol] < array2[indexCol])
return -1;
if (array1[indexCol] > array2[indexCol])
return 1;

return 0;

}
//比较数组元素array1[indexCol]和元素array2[indexCol]的数值大小
function arrayCompareNumber(array1,array2){

if (parseInt(array1[indexCol]) < parseInt(array2[indexCol]))
return -1;
if (parseInt(array1[indexCol]) > parseInt(array2[indexCol]))
return 1;

return 0;
}

//与arrayCompare相反方式比较大小,用于倒序使用
function arrayCompareRev(array1,array2){

if (array1[indexCol] < array2[indexCol])
return 1;
if (array1[indexCol] > array2[indexCol])
return -1;

return 0;

}
//与arrayCompareNumber相反方式比较大小,用于倒序使用
function arrayCompareNumberRev(array1,array2){
if (parseInt(array1[indexCol]) < parseInt(array2[indexCol]))
return 1;
if (parseInt(array1[indexCol]) > parseInt(array2[indexCol]))
return -1;

return 0;
}

//define a 2-dimension array
function BiArray(rows,cols){

//simulate multidimension array
this.rows = rows;
this.cols = cols;

//construct array
var lines = new Array(rows);
for(var i = 0;i < lines.length; i++){
lines[i] = new Array(cols);
}

// 设置数组在(i,j)的元素值为value
this.setElement = function(i,j,value){ lines[i][j] = value; };

// 获取数组在(i,j)处元素的值
this.getElement = function(i,j){return lines[i][j];};

// 返回数组第i行所在的数组
this.getLine = function(i){return lines[i];};

// 根据第j列字符串的值,对数组的行进行排序,排序结果为升序
this.sortLine = function(j){
indexCol = j;
lines.sort(arrayCompare);
};

// 根据第j列数值的值,对数组的行进行排序,排序结果为升序
this.sortLineByNumber = function(j){
indexCol = j;
lines.sort(arrayCompareNumber);
};

// 根据第j列字符串的值,对数组的行进行排序,排序结果为倒序
this.sortLineRev = function(j){
indexCol = j;
lines.sort(arrayCompareRev);
};

// 根据第j列数值的值,对数组的行进行排序,排序结果为倒序
this.sortLineByNumberRev = function(j){
indexCol = j;
lines.sort(arrayCompareNumberRev);
};
//将二维数组转为字符串格式
this.toString = function(){
var rst ="";
for(var i = 0; i < lines.length; i++){
for(var j = 0; j < lines[i].length; j++){
rst += lines[i][j];
rst += '\t';
}
rst += '\n';
}
return rst;
};
} // end of BiArray define

//ascending or descending
var asce = true;

/**
对表格中指定范围的数据进行排序
tableId 要排序的表格的id,值格式为 <table id="tb1" >
sortCol 用于排序的列号,从1开始计数
compareType 排序时比较方式,s-按字符串比较,n-按数值比较
startRow 排序范围起始行号,从1开始计数
endRow 排序范围结束行号,从1开始计数
startCol 排序范围起始列号,从1开始计数
endCol 排序范围结束列号,从1开始计数
*/
function sortTableInRange(tableId,sortCol,compareType,startRow,endRow,startCol,endCol){


try{
var table = document.getElementById(tableId);
// get all row object of the table
var objRows = table.getElementsByTagName("tr");
//alert(objRows.length);

endRow = (endRow < objRows.length ? endRow : objRows.length);

var sortRows = endRow - startRow + 1;
//alert("sortRows "+sortRows);
if (sortRows < 2) //only one line,don't sort
return ;


endCol = (endCol < objRows[1].getElementsByTagName("td").length ? endCol :
objRows[1].getElementsByTagName("td").length);


// column number of sort
//var cols = objRows[1].childNodes.length;
var cols = endCol - startCol + 1;



// define a array to store table cell and sort them
var tabData = new BiArray(sortRows,cols);


var ari = 0;
// retrived table cell data save to array
for(i = startRow - 1; i < endRow; i++){
//retrived all <td> cell
var cells = objRows[i].getElementsByTagName("td");

var arj = 0;
for(var j = startCol - 1; j < endCol; j++){
tabData.setElement(ari,arj,cells.item(j).innerHTML);
arj++;

}
ari++;
}

if (asce){
if (compareType == "n" || compareType == 'N')
tabData.sortLineByNumber(sortCol- startCol);
else
tabData.sortLine(sortCol - startCol);
asce = false;
}else{
if (compareType == "n" || compareType == 'N')
tabData.sortLineByNumberRev(sortCol - startCol);
else
tabData.sortLineRev(sortCol - startCol);
asce = true;
}
ari = 0;
//update table data with array
for(i = startRow -1; i < endRow; i++){
//retrived all <td> cell
var cells = objRows[i].getElementsByTagName("td");

arj = 0;
for(var j = startCol - 1; j < endCol; j++){
cells.item(j).innerHTML = tabData.getElement(ari,arj);
arj++;
}
ari++;
}

}catch(e){
alert(e);
}
}

/**
对表格除第一行外的数据行排序,是sortYableInRange(tableId,sortCol,compareType,2,tabRows,1,tabCols)
的特例。
tableId 要排序的表格的id,值格式为 <table id="tb1" >
用于排序的列号,从1开始计数
compareType 排序时比较方式,s-按字符串比较,n-按数值比较
*/
function sortTable(tableId,sortCol,compareType){
try{
var table = document.getElementById(tableId);
// get all row object of the table
var objRows = table.getElementsByTagName("tr");
//alert(objRows.length);

var endRows = objRows.length;

if (endRows < 2) //only one line,don't sort
return ;

// column number of table
var cols = objRows[1].getElementsByTagName("td").length;


sortTableInRange(tableId,sortCol,compareType,2,endRows,1,cols);

}catch(e){
alert(e);
}
}

</script>
</head>
<body>
常规排序例子<br>
<table id="t1" border="1">
<tr>
<td width="20%"><a href="#" onclick="sortTable('t1',1,'s')" >城市</a></td>
<td width="30%"><a href="#" onclick="sortTable('t1',2,'s')" >品牌</a></td>
<td width="30%"><a href="#" onclick="sortTable('t1',3,'n')" >销量</a></td>
</tr>
<tr>

<td><a href="#" >北京</a></td>
<td>GOOGLE</td>
<td>64</td>
</tr>
<tr>
<td>上海</td>
<td>CISCO</td>
<td>54</td>
</tr>
<tr>
<td>广州</td>
<td>MS</td>
<td>9</td>
</tr>
<tr>

<td>南京</td>
<td>INTEL</td>
<td>120</td>
</tr>
</table>


</body>
</html>
...全文

相关推荐

串口通信上位机源码软件:功能丰富、稳定可靠的SCI通信与烧录工具.pdf

串口通信上位机源码软件:功能丰富、稳定可靠的SCI通信与烧录工具.pdf

xKjWdKts

基于DSP28335开发板实现SciC232_9600的电路方案设计(原理图+源码+pcb)-电路方案

本方案为基于DSP28335开发板实现SciC232_9600的电路方案设计(原理图+源码+pcb),适合DSP刚入门的小伙伴学习使用。

weixin_38692122

超扭滑模与快速终端滑模的永磁同步电机无感控制:理论、离散化实现与仿真研究(Simulink仿真实现)

内容概要:本文聚焦于超扭滑模控制(STSMC)与快速终端滑模控制(FTSMC)在永磁同步电机(PMSM)无位置传感器控制中的应用,系统地开展了理论分析、离散化实现与Simulink仿真实验研究。重点探讨了这两种高阶滑模控制策略在零低速工况下的控制性能,通过设计基于磁链观测器的无感估计算法,实现了对电机转子位置与速度的精确估计,有效规避了传统机械传感器带来的成本增加与可靠性下降问题。文中详尽阐述了控制算法的数学建模与推导过程,并针对数字控制系统的特点进行了严谨的离散化处理,最终在Simulink环境中搭建了完整的电机控制仿真模型,通过对比实验全面评估了不同控制策略在动态响应速度、抗外部干扰能力和稳态控制精度等方面的综合性能。; 适合人群:具备自动控制理论、电机驱动原理等专业知识,并熟悉MATLAB/Simulink仿真环境操作的电气工程、自动化等相关领域的研究生、科研人员及工程技术人员。; 使用场景及目标:①深入研究超扭滑模与快速终端滑模等高阶滑模控制理论在高性能电机驱动系统中的具体应用与实现方法;②掌握永磁同步电机在零低速段无位置传感器控制的核心算法,特别是基于磁链观测的转子状态估算技术;③学习如何将连续域的先进控制理论转化为适用于实际数字控制器的离散化算法,并完成从理论到仿真的完整闭环验证。; 阅读建议:此文理论深度与实践操作紧密结合,读者应重点关注控制算法的设计思想、离散化实现的关键步骤以及Simulink仿真模型的构建细节,建议在阅读过程中动手复现仿真模型,通过调整控制器参数来深入理解各模块的功能作用及系统整体的动静态性能表现。

荔枝科研社

政府如何精准掌握园区企业创新能力,以制定更有效的科技政策?.docx

政府如何精准掌握园区企业创新能力,以制定更有效的科技政策?

BIZKEEN

旋转高频信号注入法在PMSM零低速无位置控制中的仿真研究(Matlab代码实现)

内容概要:本文围绕旋转高频信号注入法在永磁同步电机(PMSM)零低速无位置传感器控制中的应用展开深入的仿真研究,基于Matlab/Simulink平台构建完整的控制系统模型,系统阐述了高频信号注入法的理论基础、转子位置观测机制及整体控制策略设计。重点探讨了在零低速运行工况下,通过注入旋转高频电压信号并结合先进的信号处理技术(如带通滤波、坐标变换、锁相环等)有效提取转子位置信息的技术路径,成功克服了传统反电动势法在极低速时信号微弱、无法准确观测的固有缺陷。研究详细分析了高频响应信号的调制解调过程、位置估算环路的动态特性,并考察了电机参数漂移、外部干扰等因素对系统鲁棒性与估计精度的影响,通过大量仿真实验验证了该方法在提升位置观测准确性、增强系统抗干扰能力方面的显著优势。; 适合人群:具备电机控制、电力电子及自动控制理论基础,熟悉Matlab/Simulink仿真环境,从事PMSM驱动系统开发或无位置传感器控制算法研究的研发人员,特别适合电气工程、自动化等相关专业的研究生及具有1-5年工作经验的工程师。; 使用场景及目标:①深入掌握旋转高频信号注入法在PMSM无感控制中的实现原理、关键技术环节与工程实现难点;②学习并实践基于Matlab/Simulink的先进电机控制算法仿真建模、信号处理与性能分析方法;③为解决实际工程中电机在零速启动、低速精确控制等场景下的位置传感器依赖问题,提供有效的技术方案参考与系统的仿真验证手段。; 阅读建议:此资源以Matlab代码实现为核心载体,建议读者在学习过程中紧密结合提供的文档说明与仿真模型,逐模块剖析高频信号发生器、注入策略、响应信号解调、位置估算器等关键环节的设计原理,通过修改系统参数、设置不同工况进行仿真实验,深入理解算法内部机理与系统动态响应特性之间的关联。

逝川长叹
评论 1
收藏 已收藏
分享
返回顶部
echo_php
JavaScript 87,984 成员 224,681 内容