关于改变表格行顺序的有关问题
日期：2014-05-16 浏览次数：20365 次
关于改变表格行顺序的问题
首先表格的每一个tr都有ID，然后我要根据用户的选择来决定每个tr的新顺序，要求改变顺序的时候不能丢失tr里的东西，大家帮帮忙啊。
------解决方案--------------------
<table id= "table1 " border= "1 ">
<tr> <td> asdasd22 </td>
</tr>
<tr> <td> asdasd11 </td>
</tr>
<tr> <td> asdasd44 </td>
</tr>
<tr> <td> asdasd33 </td>
</tr>
<tr> <td> asdasd55 </td>
</tr>
</table>
<input name= "aaa " type= "button " value= "排序 " onclick=show()>
<script language=javascript>
function show(){
var objTbody=document.getElementById( "table1 ").childNodes[0]
var sortArray=new Array();
sortArray[0]=new Array( "2 ",objTbody.childNodes[0])
sortArray[1]=new Array( "1 ",objTbody.childNodes[1])
sortArray[2]=new Array( "4 ",objTbody.childNodes[2])
sortArray[3]=new Array( "3 ",objTbody.childNodes[3])
sortArray[4]=new Array( "5 ",objTbody.childNodes[4])
sortArray.sort(function(a,b){return (a[0]-b[0]> 0)?1:-1})
for(var i=0;i <sortArray.length;i++)
{
objTbody.appendChild(sortArray[i][1])
}
}
</script>
------解决方案--------------------
把数据绑定到结构上.
然后改变结构就可以了
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<script language= "javascript ">
function reverseNode(node) { // 颠倒节点node的顺序
var kids = node.childNodes; //获取子节点列表
var kidsNum = kids.length; //统计子节点总数
for(var i=kidsNum-1;i> =0;i--) { //逆向遍历子节点列表
var c = node.removeChild(kids[i]); //删除指定子节点，保存在c中
node.appendChild(c); //将c放在新位置上
}
}
</script>
</head>
<body>
<p> 第一行 </p>
<p> 第二行 </p>
<p> 第三行 </p>
<p> <input type= "button " name= "reverseGo " value= "颠倒 " onClick= "reverseNode(document.body) "> </p>
</body>
</html>
你看看这个吧
------解决方案--------------------
我也来试一下呵~
<script type= "text/javascript ">
function re(){
var tab=document.getElementById( "tab ").tBodies[0];
var trs=tab.rows;
var aTrs=new Array();
for(var i=0;i <trs.length;i++){
aTrs[i]=trs[i];
}
aTrs.sort(compareTrs);
var ofr=document.createDocumentFragment();
for(var i=0;i <aTrs.length;i++){
ofr.appendChild(aTrs[i]);
}
tab.appendChild(ofr);
}
function compareTrs(oTr1,oTr2){
var num1=oTr1.cells[0].firstChild.value;
var num2=oTr2.cells[0].firstChild.value;
var num1=Number(num1);
var num2=Number(num2);
if(num1 <num2){
return -1;
}else if(num1> num2){
return 1;
}else{
return 0;
}
}
</script>
<table id= "tab " border= "1 ">
<tbody>
<tr> <td> <input type= "text " value= "0 "> </td> <td> 中华人民共和国 </td>
</tr>
<tr> <td> <input type= "text " value= "1 &
首先表格的每一个tr都有ID，然后我要根据用户的选择来决定每个tr的新顺序，要求改变顺序的时候不能丢失tr里的东西，大家帮帮忙啊。
------解决方案--------------------
<table id= "table1 " border= "1 ">
<tr> <td> asdasd22 </td>
</tr>
<tr> <td> asdasd11 </td>
</tr>
<tr> <td> asdasd44 </td>
</tr>
<tr> <td> asdasd33 </td>
</tr>
<tr> <td> asdasd55 </td>
</tr>
</table>
<input name= "aaa " type= "button " value= "排序 " onclick=show()>
<script language=javascript>
function show(){
var objTbody=document.getElementById( "table1 ").childNodes[0]
var sortArray=new Array();
sortArray[0]=new Array( "2 ",objTbody.childNodes[0])
sortArray[1]=new Array( "1 ",objTbody.childNodes[1])
sortArray[2]=new Array( "4 ",objTbody.childNodes[2])
sortArray[3]=new Array( "3 ",objTbody.childNodes[3])
sortArray[4]=new Array( "5 ",objTbody.childNodes[4])
sortArray.sort(function(a,b){return (a[0]-b[0]> 0)?1:-1})
for(var i=0;i <sortArray.length;i++)
{
objTbody.appendChild(sortArray[i][1])
}
}
</script>
------解决方案--------------------
把数据绑定到结构上.
然后改变结构就可以了
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 无标题文档 </title>
<script language= "javascript ">
function reverseNode(node) { // 颠倒节点node的顺序
var kids = node.childNodes; //获取子节点列表
var kidsNum = kids.length; //统计子节点总数
for(var i=kidsNum-1;i> =0;i--) { //逆向遍历子节点列表
var c = node.removeChild(kids[i]); //删除指定子节点，保存在c中
node.appendChild(c); //将c放在新位置上
}
}
</script>
</head>
<body>
<p> 第一行 </p>
<p> 第二行 </p>
<p> 第三行 </p>
<p> <input type= "button " name= "reverseGo " value= "颠倒 " onClick= "reverseNode(document.body) "> </p>
</body>
</html>
你看看这个吧
------解决方案--------------------
我也来试一下呵~
<script type= "text/javascript ">
function re(){
var tab=document.getElementById( "tab ").tBodies[0];
var trs=tab.rows;
var aTrs=new Array();
for(var i=0;i <trs.length;i++){
aTrs[i]=trs[i];
}
aTrs.sort(compareTrs);
var ofr=document.createDocumentFragment();
for(var i=0;i <aTrs.length;i++){
ofr.appendChild(aTrs[i]);
}
tab.appendChild(ofr);
}
function compareTrs(oTr1,oTr2){
var num1=oTr1.cells[0].firstChild.value;
var num2=oTr2.cells[0].firstChild.value;
var num1=Number(num1);
var num2=Number(num2);
if(num1 <num2){
return -1;
}else if(num1> num2){
return 1;
}else{
return 0;
}
}
</script>
<table id= "tab " border= "1 ">
<tbody>
<tr> <td> <input type= "text " value= "0 "> </td> <td> 中华人民共和国 </td>
</tr>
<tr> <td> <input type= "text " value= "1 &
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
