如何用jQuery把HTML中Table列在行放到Table的第一行？

Question

领导说，小计一行放到Table的最后一行看的不方便， 那么用jQuery怎么能把它放到第一行呢？ 
下面是做实验用HTML代码。 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<table class="table" id="contrBoss">
<thead>
<tr>
<th class="sortable">
<a href="?sort=projName&amp;dir=asc">项目名称</a>
</th>
<th class="sortable">
<a href="?sort=deptName&amp;dir=asc">所属部门</a>
</th>
<th class="sortable">
<a href="?sort=contStatus&amp;dir=asc">合同状态</a>
</th>
<th class="sortable">
<a href="?sort=stampDate&amp;dir=asc">合同签订时间</a>
</th>
<th class="sortable">
<a href="?sort=contType&amp;dir=asc">合同类型</a>
</th>
<th class="sortable">
<a href="?sort=conIn&amp;dir=asc">合同收入</a>
</th>
<th class="sortable">
<a href="?sort=conOut&amp;dir=asc">合同支出</a>
</th>
<th class="sortable">
<a href="?sort=contAlreadyIn&amp;dir=asc">合同已收</a>
</th>
<th class="sortable">
<a href="?sort=contAlreadyOut&amp;dir=asc">合同已付</a>
</th>
<th class="sortable">
<a href="?sort=contDueIn&amp;dir=asc">合同应收</a>
</th>
<th class="sortable">
<a href="?sort=contDueOut&amp;dir=asc">合同应付</a>
</th>
<th class="sortable">
<a href="?sort=contContact&amp;dir=asc">联系人</a>
</th>
</tr>
</thead>
<tfoot >
<tr>
<td style="white-space: nowrap; text-align: center">
合计
</td>
<td style="white-space: nowrap; text-align: right">
10
</td>
<td colspan="3"></td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr class="odd" id = "firstRow">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="even">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="odd">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="even">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="odd">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="even">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="odd">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
<tr class="even">
<td style="white-space: nowrap; text-align: center">
集团接入
</td>
<td style="white-space: nowrap; text-align: center">
集团业务部
</td>
<td style="white-space: nowrap; text-align: center">
审批通过
</td>
<td style="white-space: nowrap; text-align: center"></td>
<td style="white-space: nowrap; text-align: center">
---
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap; text-align: right">
0.00
</td>
<td style="white-space: nowrap"></td>
</tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript"> $(document).ready(function() { });

</script>

Answer 1

抱歉， 写错了， 是“合计”， 在HTML代码中搜<tfoot>标签就能找到。 

Answer 2

这个几乎是不可能的，除非你把这个代码再写一遍，换成别的插在前面写，不是js而是html来写

Answer 3

$(document).ready(function(){
    var table=document.getElementById("contrBoss"),rows=table.tBodies[0].rows,arr=new Array(11-6+1);
    //from columns 6 to colums 11 
    for(var i=5;i<=10;i++){
     arr[i-5]=0;
    for(var j=0;j<rows.length;j++){
     arr[i-5]+=parseFloat(rows[j].cells[i].innerHTML);
    }
    }
    var row=table.tFoot.rows[0],sum=0;
    for(var i=3;i<9;i++){
     row.cells[i].innerHTML=arr[i-3];
     sum+=arr[i-3];
    }
    row.cells[1].innerHTML=sum;
    delete sum,row,i,j,rows,table;
});

Answer 4

把后面的复制下插到前面去，不过个觉得这样没必要啊，你完全可以自己布局到前面去，没必要写jquery代码吧

Answer 5

这个HTML代码是Java里的displayTag生成的，正是由于没有找到displayTag的配置选项把“合计”一行放到首行，才用JavaScript来做显示前的最后一次调整。 

Answer 6

<script type="text/javascript">        $(document).ready(function() {
            $("tfoot tr").insertBefore($("tbody tr:first"));
        });
    
</script>

Answer 7

加上table的id
<script type="text/javascript">        $(document).ready(function() {
            $("#contrBoss tfoot tr").insertBefore($("#contrBoss tbody tr:first"));
        });
    
</script>

Answer 8

用这个$('tbody').prepend($('tfoot tr').clone());更简洁明了。 

Answer 9

改进，在项目中能用版：$('table#statBean tbody').prepend($('tfoot tr').clone().addClass("footheader"))

Answer 10

function cloneFooterToHead(){
            var tfootRow = document.getElementsByTagName("tfoot")[0].cloneNode(true);
var tds = tfootRow.firstChild; tds.className="title";
document.getElementById("statBean").getElementsByTagName("tHead")[0].insertRow(1).appendChild(tds);

indexForAdd = 2; 
}用纯JavaScript写的简陋实现。