实现点击页面报表头某个字段进行该字段的重新排序: 经过验证，此代码是工作的

经过验证，此代码是工作的，但是需要进行一些配置适应本地项目

part 1: html页面部分代码

<style type="text/css">
.parent{
width:900px;
height:400px;
border:1px solid red;
}
.children{
border:1px solid blue;
height:500px;

}
</style>

<!-- 报表标题-->

<script language=javascript src="http://localhost:8087/pmlf_hebei/reportServlet?action=10&file=%2Fcom%2Frunqian%2Freport4%2Fview%2Fhtml%2Frqdialog.js" charset="GBK">
</script>
<form name="report1_turnPageForm" method=post action="http://localhost:8087/pmlf_hebei/report/PowerSourceSituationCounty.jsp?t_i_m_e=1477723896316" style="display:none">
<input type=hidden name=report1_currPage value="1">
<input type=hidden name=report1_cachedId value=A_7>
</form><script language=javascript>
function report1_toPage( pageNo ) {
if( pageNo < 1 || pageNo > report1_getTotalPage() ) return;
document.report1_turnPageForm.report1_currPage.value = pageNo;
document.report1_turnPageForm.submit();
}
</script>
<script language=javascript>
function report1_getCurrPage() {
return 1;
}
function report1_getTotalPage() {
return 2;
}
var report1_cachedId = "A_7";
</script>
<script language=javascript>
function report1_saveAsExcel() {
var address = "http://localhost:8087/pmlf_hebei/reportServlet?action=4&reportName=report1&isDialog=1";
rq_showPopWin( address, 300, 210, null );
}
function report1_saveAsExcel2( returnVal) {
document.report1_saveAs_frame.location = "http://localhost:8087/pmlf_hebei/reportServlet?action=3&file=PowerSourceSituationCounty.raq&columns=0&srcType=file&width=2000&height=0&cachedId=A_7&t_i_m_e=1477723896316" + returnVal;
}
function report1_saveAsExcel2007() {
var address = "http://localhost:8087/pmlf_hebei/reportServlet?action=4&reportName=report1&isDialog=1&is2007=1";
rq_showPopWin( address, 300, 210, null );
}
</script>
<script language=javascript>
function report1_saveAsPdf() {
var address = "http://localhost:8087/pmlf_hebei/reportServlet?action=25&reportName=report1&isDialog=1";
rq_showPopWin( address, 300, 200, null );
}
function report1_saveAsPdf2( returnVal ) {
document.report1_saveAs_frame.location = "http://localhost:8087/pmlf_hebei/reportServlet?action=6&file=PowerSourceSituationCounty.raq&columns=0&srcType=file&cachedId=A_7&t_i_m_e=1477723896316" + returnVal;
}
</script>

<script src="ceshi.js" type="text/javascript"></script>

<script language=javascript>
function report1_saveAsWord() {
document.report1_saveAs_frame.location = "http://localhost:8087/pmlf_hebei/reportServlet?action=7&file=PowerSourceSituationCounty.raq&columns=0&srcType=file&cachedId=A_7&t_i_m_e=1477723896316";
}
</script>

<iframe name="report1_saveAs_frame" id="report1_saveAs_frame" src="http://localhost:8087/pmlf_hebei/reportServlet?action=0" style="display:none"></iframe>
<script language=javascript>
function report1_saveAsText() {
document.report1_saveAs_frame.location = "http://localhost:8087/pmlf_hebei/reportServlet?action=18&file=PowerSourceSituationCounty.raq&srcType=file&separator=%09&lineBreak=%0A&cachedId=A_7&t_i_m_e=1477723896316";
}
</script>

<script language=javascript>
function report1_pivot() {
window.open( "http://localhost:8087/pmlf_hebei/reportServlet?action=28&file=PowerSourceSituationCounty.raq&srcType=file&cachedId=A_7&t_i_m_e=1477723896316" );
}
</script>

<script language=javascript>
function report1_print() {
document.report1_printIFrame.location = "http://localhost:8087/pmlf_hebei/reportServlet?action=2&name=report1&reportFileName=PowerSourceSituationCounty.raq&srcType=file&savePrintSetup=no&appletJarName=runqianReport4Applet.jar&serverPagedPrint=no&mirror=no&cachedId=A_7&t_i_m_e=1477723896316";
}
</script>
<iframe name="report1_printIFrame" id="report1_printIFrame" src="http://localhost:8087/pmlf_hebei/reportServlet?action=0" style="position:absolute;left:-100px;top:-100px" width=50 height=50></iframe>
<script language=javascript>
function report1_directPrint() {
document.report1_printIFrame.location = "http://localhost:8087/pmlf_hebei/reportServlet?action=30&name=report1&reportFileName=PowerSourceSituationCounty.raq&srcType=file&savePrintSetup=no&appletJarName=runqianReport4Applet.jar&needPrintPrompt=no&needSelectPrinter=no&mirror=no&cachedId=A_7&t_i_m_e=1477723896316";
}
</script>

<script language=javascript>
var report1oldstatus = "";
function report1416531over(){
report1oldstatus = window.status;
window.status = "";
}
function report1416531out(){
window.status = report1oldstatus;
}
</script>
<style id="report1_style">
.report1_1 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:12px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:#FFFFFF;word-break:keep-all;}
.report1_2 { text-align:center;vertical-align:middle;font-family:Dialog;font-size:12px;color:#000000;font-weight:bold;font-style:normal;text-decoration:none;border-left-style:solid;border-left-width:1px;border-left-color:#000000;border-top-style:solid;border-top-width:1px;border-top-color:#000000;border-right-style:solid;border-right-width:1px;border-right-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#000000;background-color:#00FF00;line-height:16px;}
</style>
<table id="report1" cellSpacing=0 cellPadding=0 onmouseout="report1416531out()" style="width:568px;table-layout:fixed;border-collapse:collapse">

<thead>

<!--很奇怪的是当thead标签没有了tbody标签也许就同时失效了-->
<tr height=56 style="height:56px;">
<td class="report1_2">电厂名称</td>
<td class="report1_2">电厂类型</td>
<td class="report1_2">并网电压等<br>级(kV)</td>
<td class="report1_2" onclick="sortTable(3)">装机容量<br>(MW)</td>
<td onmouseover="report1416531over()" class="report1_2" onclick="sortTable(4)">年发电量<br>(亿kWh)</td>
<td onmouseover="report1416531over()" class="report1_2" onclick="sortTable(5)";>发电利用小<br>时数(小时)</td>
<td class="report1_2" onclick="sortTable(6)">厂用电率<br>（%）</td>
<td class="report1_2">统调（是/<br>否）</td>
</tr>
</thead>
<tbody align="center">
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">黄石热电</td>
<td class="report1_1">1</td>
<td class="report1_1">8</td>
<td onmouseover="report1416531over()" class="report1_1">300</td>
<td class="report1_1">690000</td>
<td class="report1_1">2300</td>
<td class="report1_1">13.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">阳逻A</td>
<td onmouseover="report1416531over()" class="report1_1">1</td>
<td class="report1_1">8</td>
<td class="report1_1">600</td>
<td onmouseover="report1416531over()" class="report1_1">1390000</td>
<td class="report1_1">2300</td>
<td class="report1_1">49.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">阳逻B</td>
<td class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td onmouseover="report1416531over()" class="report1_1">600</td>
<td onmouseover="report1416531over()" class="report1_1">138000</td>
<td onmouseover="report1416531over()" class="report1_1">2800</td>
<td onmouseover="report1416531over()" class="report1_1">33.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">沙市新热</td>
<td class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">600</td>
<td onmouseover="report1416531over()" class="report1_1">1380000</td>
<td class="report1_1">2300</td>
<td class="report1_1">67.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">阳逻三期</td>
<td class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">9</td>
<td onmouseover="report1416531over()" class="report1_1">1200</td>
<td onmouseover="report1416531over()" class="report1_1">2760000</td>
<td class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">43.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">白莲抽蓄</td>
<td class="report1_1">3</td>
<td class="report1_1">9</td>
<td class="report1_1">1200</td>
<td class="report1_1">2760000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">48.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">长源一发</td>
<td onmouseover="report1416531over()" class="report1_1">1</td>
<td class="report1_1">8</td>
<td class="report1_1">520</td>
<td onmouseover="report1416531over()" class="report1_1">1196000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td class="report1_1">27.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">大别山</td>
<td class="report1_1">1</td>
<td class="report1_1">9</td>
<td class="report1_1">1280</td>
<td class="report1_1">2944000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">54.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">丹江口</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td class="report1_1">8</td>
<td onmouseover="report1416531over()" class="report1_1">750</td>
<td onmouseover="report1416531over()" class="report1_1">1725000</td>
<td class="report1_1">2300</td>
<td class="report1_1">61.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">丹江220</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td class="report1_1">8</td>
<td onmouseover="report1416531over()" class="report1_1">750</td>
<td class="report1_1">1725000</td>
<td class="report1_1">2300</td>
<td class="report1_1">72.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">东阳光</td>
<td class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">600</td>
<td class="report1_1">1380000</td>
<td class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">66.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">洞坪</td>
<td class="report1_1">2</td>
<td class="report1_1">8</td>
<td class="report1_1">110</td>
<td onmouseover="report1416531over()" class="report1_1">253000</td>
<td class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">16.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">鄂州</td>
<td class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">600</td>
<td onmouseover="report1416531over()" class="report1_1">1380000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">87.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">鄂州二期</td>
<td onmouseover="report1416531over()" class="report1_1">1</td>
<td class="report1_1">8</td>
<td class="report1_1">1200</td>
<td class="report1_1">2760000</td>
<td class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">83.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">高坝洲</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">270</td>
<td class="report1_1">621000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">56.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">葛大江</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td onmouseover="report1416531over()" class="report1_1">9</td>
<td class="report1_1">1750</td>
<td onmouseover="report1416531over()" class="report1_1">4025000</td>
<td class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">23.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">葛二江</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td class="report1_1">8</td>
<td onmouseover="report1416531over()" class="report1_1">965</td>
<td onmouseover="report1416531over()" class="report1_1">2219500</td>
<td class="report1_1">2300</td>
<td class="report1_1">45.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">隔河岩</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td class="report1_1">9</td>
<td class="report1_1">1212</td>
<td class="report1_1">2787600</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td onmouseover="report1416531over()" class="report1_1">42.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">隔河岩500</td>
<td class="report1_1">2</td>
<td onmouseover="report1416531over()" class="report1_1">9</td>
<td onmouseover="report1416531over()" class="report1_1">600</td>
<td class="report1_1">1380000</td>
<td class="report1_1">2300</td>
<td class="report1_1">23.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">隔河岩220</td>
<td class="report1_1">2</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">612</td>
<td class="report1_1">1407600</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td class="report1_1">23.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">汉川A</td>
<td class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">600</td>
<td class="report1_1">1380000</td>
<td onmouseover="report1416531over()" class="report1_1">2430</td>
<td onmouseover="report1416531over()" class="report1_1">87.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">汉川B</td>
<td onmouseover="report1416531over()" class="report1_1">1</td>
<td class="report1_1">8</td>
<td class="report1_1">600</td>
<td onmouseover="report1416531over()" class="report1_1">1380000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td class="report1_1">57.45</td>
<td onmouseover="report1416531over()" class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td onmouseover="report1416531over()" class="report1_1">黄龙滩</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td class="report1_1">940</td>
<td class="report1_1">2162000</td>
<td class="report1_1">2300</td>
<td class="report1_1">53.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">黄龙滩220</td>
<td onmouseover="report1416531over()" class="report1_1">2</td>
<td class="report1_1">8</td>
<td class="report1_1">340</td>
<td class="report1_1">782000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td class="report1_1">23.45</td>
<td class="report1_1">YES</td>
</tr>
<tr height=23 style="height:23px;">
<td class="report1_1">黄石新厂</td>
<td onmouseover="report1416531over()" class="report1_1">1</td>
<td onmouseover="report1416531over()" class="report1_1">8</td>
<td onmouseover="report1416531over()" class="report1_1">200</td>
<td onmouseover="report1416531over()" class="report1_1">460000</td>
<td onmouseover="report1416531over()" class="report1_1">2300</td>
<td class="report1_1">64.45</td>
<td class="report1_1">YES</td>
</tr>

</tbody>
</table>
<script src="ceshi.js" type="text/javascript"></script>

 

<!-- 报表展示部分--><!--
<div width:auto >

 

<iframe id ="iframe_wsj" marginwidth=0 marginheight=0 frameborder=0 scrolling=auto src="/pmlf_hebei/runqian/runqianEdit.jsp?raq=/PowerSourceSituationCounty.raq&reportID=wsj&alwaysShow=null&backAndRefresh=yes&funcBarLocation=top&needPageMark=no&show=false"></iframe>

</div>-->

 

 

part 2: js代码部分 这段js代码是修正过的了，网上的代码是一个很猥琐的大坑，因为故意用一个4X4的表这样只需要一个循环体就

可以完成排序但是如果表格列数和行数不等网上的代码就失效了所以修正代码如下可以处理MxN表格的排序问题

var isSort = [false,false,false];//标记是否排过序
function sortTable (colNo) {
var rowsArray = [];//表格中所有行的集合
var colsArray = [];//表格中所有列的集合
var tbody = document.getElementsByTagName('tbody')[0];
//初始化行和列
rowsArray = tbody.rows;
for (var i = 0; i <rowsArray.length; i++) {
rowsArray[i] = tbody.rows[i];

//����ÿ��tr�е�td����
//colsArray[j]=rowsArray[i].getchi;
colsArray[i]=rowsArray[i].cells[colNo];


}


//排序
//console.log(isSort[colNo])
if (!isSort[colNo]) {//isSort为false时，降序排列
isSort[colNo] = true;
colsArray.sort(function (a,b) {
return b.innerHTML - a.innerHTML;//a、b表示数组的任意两个元素，如果return>0,则b前a后，反之则a前b后
//例如：当点击第四列时，首先a=13，b=16，运算结果为b前a后；接下来a=13，b=20，因为b-a>0,之后b前a后，然后a=16，b=20，运算结果是b前a后，然后a=13，b=14，b-a>0,
//b前a后，最后再比较a=16，b=14，此时b-a<0,不需要交换次序，排序停止
//此处是 b.innerHTML - a.innerHTML，得到的结果是降序排列；
//如果是 a.innerHTML - b.innerHTML，得到的结果是升序排列；
});
}else{
//此时已经降序排序过了，对数组逆序即可
colsArray.reverse();
isSort[colNo] = false;
}
//当某一列排序后将表格所有元素的值放到新的数组中
var rowsTempArray = [];
for (var i = 0; i < rowsArray.length; i++) {
var colsTempArray = [];
for (var j = 0; j <rowsArray[i].getElementsByTagName("td").length; j++) {
//将i行的所有列的内容保存在colsTempArray[j]中
colsTempArray[j] = colsArray[i].parentNode.cells[j].innerHTML;//colsArray[i].parentNode指的是当前行
}
//将一行内容保存到rowsTempArray。
rowsTempArray[i] = colsTempArray;
}
//重绘页面
for (var i = 0; i < rowsArray.length; i++) {
for (var j = 0; j < rowsArray[i].getElementsByTagName("td").length; j++) {
rowsArray[i].cells[j].innerHTML = rowsTempArray[i][j];
}
}
}