js table操作 -------- 移动行

http://jiarry.bokee.com/5368523.html

这是一则简单的关于table排序，通过innerHTML互换td里的内容，从而达到排序的目的。主要是对JavaScript里innerHTML以及rowIndex以及DOM的一些应用。这个例子程序虽然简单，并且也有其他类似效果，但该例实用性较强，应用得当，能为界面增加不少活力。（后面省略了一些过期的演示）

selectSort.html源文件如下，没有对代码一一说明了，又不分注释，对稍懂js的人来说应该非常简单。

<style>

.tr{background-color:red}

</style>

<body>

var o1,o2,str1,str2,num1,num2;

var o1a=new Array();

var o2a=new Array();

function switchTd(tr1,tr2,num){

for(x=0;x<o1a.length;x++){

tr1.cells[x].innerHTML=o2a[x];

tr1.cells[0].innerHTML=o1a[0];

tr2.cells[x].innerHTML=o1a[x];

tr2.cells[0].innerHTML=o2a[0];

tr1.cells[2].childNodes[0].name="p"+o1a[0];

tr2.cells[2].childNodes[0].name="p"+o2a[0];

}

tr2.className="tr";

tr1.className="";

//alert(num+" "+tr1.cells[2].parentNode.innerHTML+"|"+tr2.cells[2].parentNode.innerHTML);

//alert(tr2.cells[1].childNodes[0].checked);

//document.listform.listTd[num].checked=true;//在opera下也起作用，但ff下不行;

if(tr2.cells[1].childNodes[0])tr2.cells[1].childNodes[0].checked=true;//选中被替换的radio,IE下会自动默认;

document.title=tr1.cells[2].childNodes[0].name+" name:value "+tr1.cells[2].childNodes[0].value+" *** "+tr2.cells[2].childNodes[0].name+" name:value "+tr2.cells[2].childNodes[0].value;

;

document.getElementById("info").innerHTML=tr1.cells[2].childNodes[0].name+" name:value "+tr1.cells[2].childNodes[0].value+" *** "+tr2.cells[2].childNodes[0].name+" name:value "+tr2.cells[2].childNodes[0].value;

;

}

Author:jarry

E-mail:jarryli@gmail.com

MSN:jiarry@hotmail.com

Modified date:June 2006

document.onclick=show;

function show(){

var o=document.listform.listTd;

for(var j=0;j<document.listform.listTd.length;j++){

if(document.listform.listTd[j].checked)

{

alert(j+", "+document.listform.listTd[j].parentNode.parentNode.innerHTML);

}

function SetRow(dir){

var o;

var start=false;

var num=0;

for(var j=0;j<document.listform.listTd.length;j++){

if(document.listform.listTd[j].checked)

{

//alert(document.listform.listTd[j].parentNode.parentNode.innerHTML);

o=document.listform.listTd[j];

start=true;

//num=j;//这样得到的j在firefox下有问题；很怪;只好用下面的方法了;

//alert(document.listform.listTd[j].parentNode.parentNode.cells[0].innerHTML);

//num=parseInt(document.listform.listTd[j].parentNode.parentNode.cells[0].innerHTML);//没有办法，只好通过这种方法来的到值了;

//alert(document.listform.listTd[j].parentNode.parentNode.rowIndex);

num=document.listform.listTd[j].parentNode.parentNode.rowIndex;

}

alert(document.listform.listTd.length+" "+num);

if(!start)

{

alert("请选择一个选项");return;

}

if(num<=1 && dir=="up")

{

alert("已经无法再向上");return;

}

if(num>=(document.listform.listTd.length) && dir=="down")

{

alert("已经无法再向下");return;

}

//alert(num+":"+(document.listform.listTd.length-1));

var p = o.parentNode.parentNode;

//var oldIndex=o.parentNode.parentNode.rowIndex;

//alert(o.parentNode.parentNode.parentNode.rows[oldIndex].innerHTML)

var trs = document.getElementById("listTable").getElementsByTagName("tr");

o1=trs[p.rowIndex];

var tdLen=trs[p.rowIndex].cells.length;

o1a.length=tdLen;

o2a.length=tdLen;

for(var i=0;i<tdLen;i++){

o1a[i]=trs[p.rowIndex].cells[i].innerHTML;

if(dir=="down"){

o2a[i]=trs[p.rowIndex+1].cells[i].innerHTML;

//trs[p.rowIndex+1].cells[1].childNodes[0].checked=true;

}

else{

o2a[i]=trs[p.rowIndex-1].cells[i].innerHTML;

//trs[p.rowIndex-1].cells[1].childNodes[0].checked=true;

}

if(dir=="down"){

o2=trs[p.rowIndex+1];

// num=num+1;

}else{

o2=trs[p.rowIndex-1];

// num=num-1;

}

switchTd(o1,o2,num);

}

function switchTd1(tr1,tr2){

//alert(tr1.cells[2].childNodes[0].name)

//alert(o2a[2].childNodes[0].value);

for(x=0;x<o1a.length;x++){

tr1.cells[x].innerHTML=o2a[x];

tr1.cells[0].innerHTML=o1a[0];

//tr2.cells[x].innerHTML=o1a[x];

// tr2.cells[0].innerHTML=o2a[0];

// tr1.cells[1].childNodes[0].checked=true;

//alert(o1a[0]+"||"+o2a[0]);

//alert(tr2.cells[1].childNodes[0].name+""+tr1.cells[1].childNodes[0].name);

// tr1.cells[2].childNodes[0].name="p"+o1a[0];

//tr2.cells[2].childNodes[0].name="p"+o2a[0];

}

tr1.className="tr";

tr2.className="";

//var trs = document.getElementById("listTable").getElementsByTagName("tr");

//alert(o1a[2]+"||"+o2a[2]);

//alert(trs[0].innerHTML+""+trs[1].innerHTML)

//document.title=tr1.cells[2].childNodes[0].name+" name:value "+tr1.cells[2].childNodes[0].value+" *** "+tr2.cells[2].childNodes[0].name+" name:value "+tr2.cells[2].childNodes[0].value;

;

}

function insertTd(ftd,otd){

alert(o1.innerHTML+""+o2.innerHTML);

for(x=0;x<ftd.cells.length;x++){

otd.cells[x].innerHTML=o1.cells[x].innerHTML;

ftd.cells[x].innerHTML=o2.cells[x].innerHTML;

}

var str1 = trs[p.rowIndex].innerHTML;

var str2 = trs[p.rowIndex+1].innerHTML;

//var cp = p.cloneNode(true);

//document.getElementById("listTable").insertBefore(cp, trs[p.rowIndex + 1]);

// document.getElementById("listTable").insertRow[p.rowIndex].appendChild(str1);

// document.getElementById("listTable").insertBefore(trs[p.rowIndex+1], trs[p.rowIndex]);

//document.getElementById("listTable").appendChild();

//alert(str1+"||"+str2+"|"+p+"|"+p.rowIndex);

//alert(trs[p.rowIndex].cells[1].innerHTML)

// insertTd(trs[p.rowIndex],o2);

// insertTd(trs[p.rowIndex],trs[p.rowIndex+1]);

//trs[3].innerHTML=str2;

//alert(trs[p.rowIndex].innerHTML)// = str2;

//alert(p.rowIndex)

//trs[p.rowIndex + 1].innerHTML = str1;

</script><form name="listform" action="">

<tr>

<td>您认为金牌总数的排名将是？</td>

</tr>

中国</td>

</tr>

美国</td>

</tr>

俄罗斯</td>

</tr>

法国</td>

</tr>

德国</td>

</tr>

英国</td>

</tr>

日本</td>

</tr>

韩国</td>

</tr>

瑞典</td>

</tr>

<tr align="center"<

常用链接

留言簿(1)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习（技术）

观察思考（非技术）

搜索

最新评论

阅读排行榜

评论排行榜