http://jiarry.bokee.com/5368523.html
這是一則簡單的關于table排序，通過innerHTML互換td里的內容，從而達到排序的目的。主要是對JavaScript里innerHTML以及rowIndex以及DOM的一些應用。這個例子程序雖然簡單，并且也有其他類似效果，但該例實用性較強，應用得當，能為界面增加不少活力。（后面省略了一些過期的演示）
selectSort.html源文件如下，沒有對代碼一一說明了，又不分注釋，對稍懂js的人來說應該非常簡單。
<style>
.tr{}{background-color:red}
</style>
<body>
<div id=info> </div>
<center>
<script type="text/javascript">
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
Copyright@http://jiarry.blogchina.com http://jiarry.126.com
Modified date:June 2006
All right reserved!
*/
/**//*
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="">
<table width="" border="0" cellspacing="0" cellpadding="0">
<tr>
<td ><table width="100%" border="0" cellspacing="1" cellpadding="0" id="listTable" bgcolor="#D57501">
<tr align="center" bgcolor="#FFFFFF">
<td height="24">排名</td>
<td width=100>選擇</td>
<td>您認為金牌總數的排名將是？</td>
</tr>
<tr align="center" bgcolor="#FFFFFF" id="1">
<td>1</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio1"></td>
<td><input name="p1" type="hidden" value="中國">
中國</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>2</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio2"></td>
<td><input type="hidden" name="p2" value="美國">
美國</td>
</tr>
<tr align="center" bgcolor="#FFFFFF" id="3">
<td>3</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio3"></td>
<td><input type="hidden" name="p3" value="俄羅斯">
俄羅斯</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>4</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio4"></td>
<td><input type="hidden" name="p4" value="法 國">
法 國</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>5</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio5"></td>
<td><input type="hidden" name="p5" value="德 國">
德 國</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>6</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio6"></td>
<td><input type="hidden" name="p6" value="英 國">
英 國</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>7</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio7"></td>
<td><input type="hidden" name="p7" value="日 本">
日 本</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>8</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio8"></td>
<td><input type="hidden" name="p8" value="韓 國">
韓 國</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>9</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio9"></td>
<td><input type="hidden" name="p9" value="瑞 典">
瑞 典</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>10</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio10"></td>
<td><input type="hidden" name="p10" value="西班牙">
西班牙</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>11</td>
<td><input name="listTd" type="radio" value="radiobutton" id="radio10"></td>
<td><input type="hidden" name="p10" value="澳大利亞">
澳大利亞</td>
</tr>
</table></td>
<td width="322" valign="top"><a href="javascript:SetRow('up');" class="btlink2" onclick="">↑向上移動</a><div style="margin-top:10px"><a href="javascript:SetRow('down');" class="btlink" onclick="">↓向下移動</a></div></td>
</tr>
</table>
<script type="text/javascript">
var s=0,first;
var lt=document.forms["listform"].listTd;
while(s<lt.length){
lt[s].onclick=function(){
if(this.checked){
setbg(this);
}
}
lt[s].parentNode.parentNode.cells[1].onclick=function(){
//如果點擊了radio的td;
this.childNodes[0].checked=true;
setbg(this.childNodes[0]);
}
lt[s].parentNode.parentNode.cells[1].onmouseover=function(){
this.bgColor="red";
}
lt[s].parentNode.parentNode.cells[1].onmouseout=function(){
this.bgColor="";
}
s++;
}
var trs = document.getElementById("listTable").getElementsByTagName("tr");
function setbg(obj){
//alert(obj.parentNode.parentNode.innerHTML);
/**//*
var first = trs[1];
first.className="";
first = obj.parentNode.parentNode;
first.className="tr";*/
var t=1;
while(t<trs.length){
se=obj.parentNode.parentNode;
if(trs[t]!=se)trs[t].className="";
se.className="tr";
t++;
}
}
</script>
</form>
posted on 2007-11-29 17:09
lk 閱讀(3368)
評論(8) 編輯 收藏 所屬分類:
ajax&js